Agent skill · design visual · cloudai-x
threejs-animation
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
Why this skill is useful
Provides detailed domain-specific knowledge on Three.js animation systems, including keyframe tracks and animation mixing that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-07-09. 2,926 stars on the source repository.
What this skill does
Three.js Animation Quick Start Animation System Overview Three.js animation system has three main components: 1. AnimationClip - Container for keyframe data 2. AnimationMixer - Plays animations on a root object 3. AnimationAction - Controls playback of a clip AnimationClip Stores keyframe animation data. KeyframeTrack Types Interpolation Modes AnimationMixer Plays animations on an object and its descendants. Mixer Events AnimationAction Controls playback of an animation clip. Fade In/Out Loading GLTF Animations Most common source of skeletal animations. Skeletal Animation Skeleton and Bones Programmatic Bone Animation Bone Attachments Morph Targets Blend between different mesh shapes. Animating Morph Targets Animation Blending Mix multiple animations together. Additive Blending Animation Utilities Procedural Animation Patterns Smooth Damping Spring Physics Oscillation Performance Tips 1. Share clips: Same AnimationClip can be used on multiple mixers 2. Optimize clips: Call clip.optimize() to remove redundant keyframes 3. Disable when off-screen: Stop mixer updates for invisible objects 4. Use LOD for animations: Simpler rigs for distant characters 5. Limit active mixers: Each mixer.update() has a cost See Also threejs-loaders - Loading animated GLTF models threejs-fundamentals - Clock and animation loop threejs-shaders - Vertex animation in shaders
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills cloudai-x/threejs-animation