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.
Profile →npx skills add sickn33/agentic-awesome-skills --skill threejs-animation --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 ```javascript 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. ```javascript // Create animation
- When to Use
- Quick Start
- Animation System Overview
- AnimationClip
- KeyframeTrack Types
- Interpolation Modes
- BezierInterpolant (r183)
- AnimationMixer
- Mixer Events
- AnimationAction
- Fade In/Out
- Loading GLTF Animations
- Skeletal Animation
- Skeleton and Bones
What does the threejs-animation skill do?
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
How do I install it?
Run `npx skills add sickn33/agentic-awesome-skills --skill threejs-animation --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From sickn33/agentic-awesome-skills, a repository with 44,414 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.