threejs-animation

Name: threejs-animation
Availability: InStock
Author: uniquecrete

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

Ready to run

npx skills add https://github.com/Uniquecrete/ThinkFasterv1 --skill threejs-animation-uniquecrete

💬 Prompt for ChatGPT / Claude Chat▼

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.