threejs-animation

Create and manage Three.js animation systems for GLTF characters and clips.

Updated Apr 3, 2026

Search Tags:#animation #three.js #gltf #morph targets #procedural motion #skeletal rig

Ready to run

npx skills add https://github.com/norrbacka/threejs_codex_base --skill threejs-animation-norrbacka

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/norrbacka/threejs_codex_base/tree/main/.codex/skills/threejs-animation
Command: npx skills add https://github.com/norrbacka/threejs_codex_base --skill threejs-animation-norrbacka

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create, control, and debug animation in Three.js scenes without reinventing the animation plumbing for every project.

Core Features & Use Cases

Animation Playback: Load and control clips with AnimationMixer, AnimationAction, and loop or fade behavior.
Skeletal and Morph Target Control: Work with bones, skinned meshes, and morph targets for character motion and facial expression.
Procedural Motion: Add time-based movement, oscillation, damping, and spring-like effects for objects and UI elements.
Use Case: Use it when a GLTF character needs idle, walk, and run states blended smoothly while a prop is attached to a hand bone.

Quick Start

Use the threejs-animation skill to help me add a looping idle-and-walk blend to a loaded GLTF character and keep the code aligned with the project’s current Three.js version.

Frequently Asked Questions about threejs-animation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I blend idle, walk, and run animation clips smoothly in Three.js?▼

Smooth Three.js animation blending requires AnimationMixer and AnimationAction to manage clip playback, cross-fades, and loop behavior. You control weight transitions between actions to blend character states like idle, walk, and run seamlessly without manual frame interpolation.

What is the best way to animate morph targets for facial expressions on a GLTF character in Three.js?▼

Animating morph targets in Three.js involves accessing the morphTargetInfluences array on the mesh geometry. You update these influence values over time within the animation loop to drive facial expressions or shape changes on imported GLTF characters.

How do I attach a prop to a hand bone in a Three.js skeletal rig?▼

Attaching a prop to a Three.js skeletal rig requires accessing the specific bone via the skinned mesh skeleton. You add the prop object as a child of the target hand bone so it inherits the skeletal motion during AnimationMixer updates.

Why does my Three.js AnimationMixer update freeze or play animations incorrectly?▼

Three.js AnimationMixer updates fail or freeze when the mixer update call misses the correct time delta or uses a mismatched Three.js API version. Ensuring correct delta time passing and version-aligned APIs guarantees reliable clip playback and skeletal motion.

Can I add procedural motion like oscillation and damping to objects in a Three.js scene?▼

You can add procedural motion to Three.js objects by applying time-based mathematical functions for oscillation, damping, and spring effects. This approach drives movement for objects and UI elements independently of skeletal rigs or imported clips.