threejs-animation

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.
type	skill
created	2026-02-27T00:00:00.000Z
domain	design-creative
category	3d-animation
risk	unknown
source	community
tags	["skill","design-creative","3d-animation","threejs","animation"]

Three.js Animation

When to Use

• You need to animate objects, rigs, morph targets, or imported GLTF animations in Three.js.
• The task involves mixers, clips, keyframes, procedural motion, or animation blending.
• You are building motion behavior in a Three.js scene rather than just static rendering.

Quick Start

import * as THREE from "three";

// Simple procedural animation with Timer (recommended in r183)
const timer = new THREE.Timer();

renderer.setAnimationLoop(() => {
  timer.update();
  const delta = timer.getDelta();
  const elapsed = timer.getElapsed();

  mesh.rotation.y += delta;
  mesh.position.y = Math.sin(elapsed) * 0.5;

  renderer.render(scene, camera);
});

Note: THREE.Timer is recommended over THREE.Clock as of r183. Timer pauses when the page is hidden and has a cleaner API. THREE.Clock still works but is considered legacy.

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.

// Create animation clip
const times = [, , ]; 
 values = [, , ]; 

 track =  .(
  , 
  times,
  values,
);

 clip =  .(, , [track]);