threejs-animation

Name: threejs-animation
Availability: InStock
Author: Alex

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

Updated Mar 17, 2026

Search Tags:#animation #threejs #keyframes #morph-targets #blending #gltf #skeletal-animation

Ready to run

npx skills add https://github.com/alexzhang1030/platform-demo --skill threejs-animation-alexzhang1030

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/alexzhang1030/platform-demo/tree/main/.agents/skills/threejs-animation
Command: npx skills add https://github.com/alexzhang1030/platform-demo --skill threejs-animation-alexzhang1030

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create, control, and blend Three.js animations without piecing together scattered examples or guessing the right animation APIs to use.

Core Features & Use Cases

Animation Playback: Work with AnimationClip, AnimationMixer, and AnimationAction to play and control keyframed motion.
Character Animation: Handle GLTF skeletal rigs, bone attachments, loop modes, fades, crossfades, and additive layers.
Procedural Motion: Build smooth oscillation, spring, damping, and other runtime-driven movement patterns for objects and meshes.
Morph Target Control: Animate facial expressions and shape blending through morph target influences and keyframe tracks.
Use Case: Use this Skill when you need to import a GLTF model, trigger its walk cycle, blend into a run animation, and keep the mixer updated in the render loop.

Quick Start

Ask for a Three.js animation implementation that loads a GLTF model, plays its clips, and updates the mixer correctly in the animation 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 blend skeletal animations from a GLTF model in Three.js?▼

To play and blend GLTF skeletal animations in Three.js, use AnimationMixer and AnimationAction to manage keyframed motion, apply loop modes, and crossfade between actions. You must also update the mixer within the render loop.

What is the best way to crossfade between animation actions in Three.js?▼

The best way to crossfade between actions in Three.js is by using AnimationAction methods to fade in and out clips. Additive layers can also blend motion, requiring consistent AnimationMixer updates during the render loop for smooth transitions.

How do I control morph targets for facial expressions in Three.js?▼

To control morph targets in Three.js, animate facial expressions by adjusting morph target influences through keyframe tracks. This technique blends shape variations and requires interpolation settings to achieve smooth runtime playback.

Can I create procedural movement and oscillation for objects in Three.js?▼

You can create procedural movement in Three.js by building smooth oscillation, spring, and damping patterns for objects and meshes. This runtime-driven motion operates alongside AnimationMixer updates to provide dynamic, non-keyframed movement.