About threejs-animation
threejs-animation is a skill that provides implementation and verification guidance for animation and timelines in Three.js projects. It covers time-based motion, animation mixing, scroll-driven timelines, reduced-motion support, and lifecycle cleanup.
Key features
- 01Frame-rate-independent motion
- 02Animation mixer and clip transitions
- 03Scroll timeline mapping
- 04Reduced-motion handling
- 05Animation lifecycle cleanup
- 06Cross-state and frame-rate verification
Use cases
- 01Implementing transitions between animation clips
- 02Building animations tied to page scroll
- 03Keeping motion consistent after tab inactivity
- 04Checking behavior with reduced motion enabled
Install
Copy the command and run it in a terminal.
npx skills add https:/ / github.com/ cesartevisual/ threejs-skills --skill threejs-animationAfter installing, type/threejs-animationin Claude Code to confirm it loaded.
Details
From the project READMEAnimation and Timelines
Use the project's installed versions and existing architecture. These instructions supplement the user's task; they do not authorize unrelated changes or external actions.
Identify which system owns each animated property: imported clips, procedural motion, scroll timeline, controls, or physics. Blend or hand off explicitly when two systems would otherwise write the same transform.
Use elapsed time or delta in seconds rather than frame counts. Clamp large visual deltas after a tab resumes; physics needs its own fixed-step policy. Use frame-independent damping such as 1 - exp(-lambda * delta), with reusable scratch values.
Create a mixer for the appropriate root, select clips by inspected names, and define loop, pause, finished, and transition behavior. Reset and play the destination action as needed for crossfades; inspect root motion rather than silently translating both the root and its parent.
For scroll, map normalized section progress to a defined timeline. Recalculate ranges on layout changes and handle reverse scrolling and jumps directly. Do not accumulate scroll deltas as if all input arrived continuously. Keep text readable and content reachable without the animated camera path.
Respect reduced-motion preferences by removing nonessential motion or presenting stable states. Suspend work when the scene is inactive where practical. Stop owned actions, remove mixer listeners, and uncache roots only after their actions stop.
Verify at different frame rates, after backgrounding, during rapid state changes, on backward scroll, and with reduced motion. Confirm animation speed and final states remain consistent.
API reference
Consult the official documentation for exact signatures and revision-specific behavior. If documentation access is unavailable, inspect installed types/source and state any remaining uncertainty.