skills.rest
simon-tanna
simon-tannaCOMMUNITY
Explore all skills by this author →
GitHub

threejs-animation

Animate Three.js objects using keyframe tracks, AnimationClip, and AnimationMixer.

Updated Feb 20, 2026
Search Tags:#animation#threejs#morph-targets#keyframe#gltf#mixer
One-click install
npx skills add https://github.com/simon-tanna/lll-animation-plugin --skill threejs-animation-simon-tanna
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/simon-tanna/lll-animation-plugin/tree/main/skills/threejs-animation
Command: npx skills add https://github.com/simon-tanna/lll-animation-plugin --skill threejs-animation-simon-tanna

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js animation often requires boilerplate to drive time-based motion; this skill provides a focused reference for creating and controlling native Three.js animations using keyframe tracks, AnimationClip, and AnimationMixer.

Core Features & Use Cases

  • Keyframe tracks and AnimationClip creation for precise motion curves.
  • AnimationMixer and AnimationAction to play, blend, and control clips on 3D models.
  • Skeletal animation and morph target support for realistic character motion.
  • GLTF animation integration and runtime pose adjustments.

Quick Start

Create a basic animation by defining a keyframe track, wrap it into an AnimationClip, attach it to an AnimationMixer on your model, and drive the mixer in your render loop.

Frequently Asked Questions about threejs-animation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I animate a GLTF model using AnimationMixer in Three.js?▼

To animate a GLTF model, attach an AnimationMixer to the loaded object, create an AnimationAction from the model's clips, call play, and advance the mixer using elapsed time in your render loop. This drives skeletal animation and runtime pose modifications.

What is the best way to blend morph targets in Three.js?▼

Blending morph targets requires defining keyframe tracks for influence values, wrapping them into an AnimationClip, and playing the clip via an AnimationMixer to interpolate facial expressions or shape transitions smoothly over time.

How do KeyframeTrack and AnimationClip work together for procedural motion?▼

KeyframeTrack defines time-value pairs for specific object properties, and AnimationClip groups multiple tracks into a reusable timeline. Playing this clip through an AnimationMixer applies the procedural motion to your Three.js scene.

Does Three.js support runtime pose modifications for skeletal animations?▼

Yes, Three.js supports runtime pose modifications by allowing manual adjustments to bone properties while an AnimationMixer plays skeletal animation clips. This enables dynamic character motion adjustments during the render loop.

Why does my Three.js animation not update in the render loop?▼

Three.js animation fails to update if the AnimationMixer is not advanced with the time delta in the render loop. You must call mixer.update(delta) every frame to interpolate KeyframeTrack values and progress the AnimationClip.

Related Skills

Explore More Software Engineering Skills→
mitgar14mitgar14

threejs-animation

Animate Three.js objects, clips, and rigs in real time.

Community
Intermediate
MonumentalSystemsMonumentalSystems
17

animation

Apply animation principles to keyframing, curves, blending, and state machines.

Official
Intermediate
nicolasieber-tmnicolasieber-tm

threejs-animation

Animate Three.js scenes with keyframes, skeletal rigs, and morph targets.

Community
Advanced
gyalamanch001agyalamanch001a

threejs-animation

Create and control Three.js animations using AnimationMixer, AnimationAction, AnimationClip, GLTFLoader, and per-frame updates.

Community
Advanced