Animate in Three.js - keyframe clips, the AnimationMixer/AnimationAction system, GLTF and skeletal animation, morph targets, procedural motion with Clock, and blending between animations.
---
name: threejs-animation
description: Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
---
Coordinate motion in Three.js, from simple procedural tweens to blended skeletal clips.
## How to use
1. For procedural motion, drive transforms in the render loop using a `THREE.Clock` (`getDelta()` for frame-rate-independent steps, `getElapsedTime()` for oscillation).
2. For keyframed motion, learn the three pieces: `AnimationClip` (keyframe data), `AnimationMixer` (plays clips on a root object), and `AnimationAction` (controls playback).
3. Build clips from `KeyframeTrack`s - `NumberKeyframeTrack`, `VectorKeyframeTrack`, `QuaternionKeyframeTrack` - targeting property paths like `.position[y]`.
4. Play GLTF/skeletal animations by creating a mixer on the loaded scene and running each `gltf.animations` clip as an action.
5. Advance the mixer every frame with `mixer.update(delta)`, and blend with `crossFadeTo` / action weights.
Full skill & source: https://github.com/CloudAI-X/threejs-skills/tree/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-animation