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.
Best for Three.js developersWorks with GitHubLow risk
⌘source
- author
@sickn33- language
- Python
★34kstars
5.6kforks
Apr 18, 2026
✦overview.md
Key Features
- ·Animate objects, rigs, morph targets, and imported GLTF animations
- ·Manage keyframe data with AnimationClip
- ·Control playback with AnimationMixer and AnimationAction
- ·Create procedural motion with Timer
- ·Blend multiple animations together
- ·Pause animations when page is hidden
Use Cases
- →Animating characters or objects in a Three.js scene
- →Playing back animations imported from GLTF files
- →Creating procedural motion like bobbing or rotating objects
- →Blending between different animation states
- →Building interactive motion behavior beyond static rendering
Best for
- ✓Three.js developers
- ✓Interactive 3D web projects
Not ideal for
- !Static scene rendering
- !2D animation
FAQs
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.
risk:unknown
source:community
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:
- AnimationClip - Container for keyframe data
- AnimationMixer - Plays animations on a root object
- AnimationAction - Controls playback of a clip
AnimationClip
Stores keyframe animation data.
$install
1-click copynpx skills add sickn33/antigravity-awesome-skills --skill threejs-animationSafety assessment
★
Clarity score
How clear and easy to understand the SKILL.md instructions are, rated from 1 to 5.
3/ 5
goodMostly clear, but there are still a few confusing or poorly structured parts.
◎
Actionability score
How directly an agent can act on the SKILL.md instructions, rated from 1 to 5.
3/ 5
mediumPartially actionable with several concrete steps, but still missing important details.