threejs-animation
This skill provides a reference and code patterns for implementing animation in Three.js, covering keyframe systems, skeletal animation, morph targets, and procedural motion.
Is threejs-animation safe to install?
Safe to install: our audit of threejs-animation's source files found 0 shell commands, 0 external URLs, no file writes (none risk). Every command and URL listed appears verbatim in the skill's source. The skill provides code examples and documentation for Three.js animation. It does not execute shell commands or perform network requests.
How we audit skills: our security review methodology.
Who is this skill for?
Developers building 3D web applications using the Three.js library who need to implement or manage object animations.
What can you do with it?
- Creating keyframe animations for object properties
- Playing and blending skeletal animations from GLTF models
- Managing morph target influences for facial or mesh expressions
- Implementing procedural motion using math functions, springs, or smooth damping
- Optimizing animation performance in render loops
How good is this skill?
Quality score: 5/10. The skill documentation is comprehensive, well-structured, and provides clear, copy-pasteable code examples for all major Three.js animation features.
What does the skill file contain?
# Three.js Animation
## Quick Start
```javascript
import * as THREE from "three";
// Simple procedural animation
const clock = new THREE.Clock();
function animate() {
const delta = clock.getDelta();
const elapsed = clock.getElapsedTime();
mesh.rotation.y += delta;
mesh.position.y = Math.sin(elapsed) * 0.5;
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
```
## 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...Frequently asked questions
How do I play an animation from a loaded GLTF model?
Create an AnimationMixer with the model, retrieve the clips from the loaded GLTF object, and use mixer.clipAction(clip).play() to start the animation.
Can I blend multiple animations together?
Yes, you can use the AnimationMixer to play multiple actions simultaneously and adjust their weights using setEffectiveWeight() or use crossFadeTo() to transition between them.
How do I animate morph targets?
Access the morphTargetInfluences array on the mesh and update the values directly, or create a NumberKeyframeTrack targeting the morphTargetInfluences property.
What is the purpose of the AnimationMixer?
The AnimationMixer plays animations on a specific root object and manages the playback state and blending of multiple animation clips.
Related skills
hyperframes
157.0KDevelopers and content creators who need to automate video production, motion graphics, or code-based video editing using HTML and CLI-based workflows
HyperFrames is an intent-routing skill that manages video, animation, and motion graphic creation by directing requests to specialized workflows. It renders video from HTML compositions where timing is defined by data attributes. The skill acts as a central entry point for authoring, editing, and rendering video projects.
emil-design-eng
114.3KDevelopers and designers building user interfaces who want to improve the feel and responsiveness of their software
This skill provides design engineering guidance based on Emil Kowalski's philosophy for UI polish, component design, and animation. It includes specific frameworks for animation decision-making, CSS transition techniques, and component interaction patterns.
make-interfaces-feel-better
37.7KFrontend developers and designers using AI agents to review UI code or implement design system improvements
This skill provides design engineering principles for polishing user interfaces. It guides the agent in reviewing and implementing UI details such as typography, animations, border radii, optical alignment, and performance optimizations.
gsap-core
30.9KDevelopers building animations in React, Vue, Svelte, or vanilla JavaScript who need to implement tweens, timelines, or responsive animation logic
The gsap-core skill provides instructions and patterns for using the GreenSock Animation Platform (GSAP) core API. It covers tween methods, easing, stagger, transforms, accessibility via gsap.matchMedia, and best practices for performant animations in JavaScript environments.