skills.rest
Uniquecrete
UniquecreteCOMMUNITY
Explore all skills by this author →
GitHub

threejs-animation

Play and blend keyframe, skeletal, and morph-target animations in Three.js.

Updated May 6, 2026
Search Tags:#threejs#skeletal animation#morph targets#procedural motion#animation mixing#gltf animations#keyframe tracks
One-click install
npx skills add https://github.com/Uniquecrete/ThinkFasterv1 --skill threejs-animation-uniquecrete
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/Uniquecrete/ThinkFasterv1/tree/main/Skills/threejs-animation
Command: npx skills add https://github.com/Uniquecrete/ThinkFasterv1 --skill threejs-animation-uniquecrete

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js animation work becomes hard to manage when you need to play, blend, and combine clips for characters, models, and procedural motion without writing fragile one-off logic.

Core Features & Use Cases

  • Keyframe animation clips: Build animations with AnimationClip and different KeyframeTrack types for properties like position, rotation, color, visibility, and morph targets.
  • Playback and control: Use AnimationMixer and AnimationAction to play clips, control time/looping, and manage state transitions with fade and crossfade.
  • Practical animation scenarios: Animate GLTF skeletal animations, attach objects to bones, drive morph-target facial expressions, and mix multiple animations based on runtime variables (e.g., speed).

Quick Start

Use the threejs-animation skill to implement animation mixing by creating an AnimationMixer for your GLTF scene, selecting clips from gltf.animations, and calling mixer.update(delta) 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 blend multiple GLTF animations in Three.js without writing custom logic?▼

To blend GLTF animations in Three.js, use an AnimationMixer to manage clips from gltf.animations and manipulate AnimationAction weight and fade settings. Calling mixer.update(delta) inside the render loop controls playback state transitions and produces smooth crossfades between actions.

How does AnimationMixer.update(delta) work for keyframe and skeletal animation mixing?▼

AnimationMixer.update(delta) advances the timeline for active keyframe and skeletal animation tracks. It synchronizes AnimationAction playback, looping, and weight values to blend multiple clips seamlessly during interactive scene rendering.

Can I drive morph target facial expressions and procedural motion based on runtime variables in Three.js?▼

You can drive morph target facial expressions and procedural motion by creating AnimationClip tracks for morph influences. Adjusting AnimationAction weight based on runtime variables like speed mixes procedural motion with existing keyframe clips.

What's the best way to crossfade between character animation actions in Three.js?▼

The best way to crossfade character actions is using AnimationAction methods to fade out the current clip while fading in the next. Setting action weights and calling AnimationMixer.update(delta) ensures smooth transitions without abrupt visual jumps.

Why does my Three.js animation clip not play smoothly when mixing multiple actions?▼

Three.js animation mixing fails when AnimationAction weight or loop settings are incorrect. Ensure you call AnimationMixer.update(delta) consistently in the render loop and configure crossfade durations properly to maintain smooth playback.

Does Three.js support animating object properties like color and visibility using KeyframeTrack?▼

Three.js supports animating properties like position, rotation, color, and visibility using different KeyframeTrack types within an AnimationClip. This enables dynamic property changes alongside skeletal and morph-target animations.

Related Skills

Explore More Software Engineering Skills→
tadams95tadams95
1

threejs-fundamentals

Bootstrap Three.js scenes with Scene, PerspectiveCamera, and WebGLRenderer setup.

Community
Intermediate
TumeloRamaphosaTumeloRamaphosa

web3d-integration-patterns

Design layered Web 3D architectures combining Three.js, React Three Fiber, and animation libraries.

Community
Advanced
xingBaGanxingBaGan

threejs-animation

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

Community
Advanced
alexzhang1030alexzhang1030

threejs-animation

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

Community
Intermediate