skills.rest
jtgiron
jtgironCOMMUNITY
Explore all skills by this author →
GitHub

threejs-animation

Build and control Three.js animations with AnimationMixer and AnimationAction.

Updated May 4, 2026
Search Tags:#animation#three.js#keyframes#morph-targets#gltf#skeletal-animation#procedural-motion
One-click install
npx skills add https://github.com/jtgiron/portfolio --skill threejs-animation-jtgiron
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/jtgiron/portfolio/tree/main/.agents/skills/threejs-animation
Command: npx skills add https://github.com/jtgiron/portfolio --skill threejs-animation-jtgiron

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you create and control motion in Three.js scenes without stitching together scattered examples, making animation setup easier for characters, objects, and procedural effects.

Core Features & Use Cases

  • Keyframe Playback: Build and run AnimationClips with AnimationMixer and AnimationAction for looping, pausing, fading, and crossfading.
  • Character Motion: Work with GLTF skeletal rigs, bones, and bone attachments for humanoid or creature animation.
  • Shape Variation: Drive morph targets and blend multiple clips for expressive faces, transitions, and speed-based movement.
  • Procedural Motion: Apply smooth damping, spring physics, oscillation, and other runtime motion patterns for dynamic scene behavior.
  • Use Case: Animate a loaded GLB character from idle to walk while blending in a breathing layer and adjusting bone poses for custom gestures.

Quick Start

Use this skill to animate a Three.js model by loading its clip, creating an AnimationMixer, and updating the mixer inside 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 play and loop Three.js animations loaded from a GLTF file?▼

To play Three.js GLTF animations, load the model, extract its AnimationClip tracks, bind them to an AnimationMixer, create an AnimationAction, and call play while updating the mixer delta time in your render loop to handle looping and fading.

What is the best way to blend between idle and walk animations in Three.js?▼

The best way to blend Three.js character animations is using AnimationAction crossfades, scheduling actions with staggered fade durations, and updating the AnimationMixer every frame to smoothly interpolate skeletal rig weights between idle and walk cycles.

How do I add procedural motion to a skeletal animation rig in Three.js?▼

To add procedural motion to a Three.js skeletal rig, run your base AnimationAction, update the mixer, then directly manipulate bone quaternions or positions using spring physics and smooth damping math for dynamic overlays like custom gestures.

Does Three.js AnimationMixer require per-frame updates to avoid playback issues?▼

Yes, Three.js AnimationMixer requires per-frame updates using the render loop's delta time to correctly advance AnimationAction playback, maintain crossfade synchronization, and prevent timing drift or frozen animation tracks during scene rendering.

Why does my Three.js character animation freeze after crossfading between actions?▼

Three.js character animations freeze after crossfading when the outgoing AnimationAction is set to stop immediately instead of fading out, or if the mixer update loop stops passing delta time to maintain the blended skeletal rig weights.

Can I use AnimationClips to blend multiple motion layers like breathing and walking in Three.js?▼

Yes, you can use AnimationMixer to play multiple AnimationClips simultaneously on a single Three.js character, adjusting each AnimationAction's weight to blend a base walking layer with a secondary breathing clip for expressive motion.

Related Skills

Explore More Software Engineering Skills→
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
MonichreMonichre

threejs-animation

Implement Three.js keyframe, skeletal, and morph target animations with AnimationMixer.

Community
Intermediate
alexzhang1030alexzhang1030

threejs-animation

Create and control Three.js animations with AnimationMixer and AnimationAction.

Community
Intermediate