skills.rest
alexzhang1030
alexzhang1030COMMUNITY
Explore all skills by this author →
𝕏@alexz_devGitHub

threejs-animation

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
One-click install
npx skills add https://github.com/alexzhang1030/platform-demo --skill threejs-animation-alexzhang1030
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
simon-tannasimon-tanna

threejs-animation

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

Community
Intermediate
heygen-comheygen-com
40.2k

three

Render deterministic Three.js scenes synced to HyperFrames time via hf-seek events.

Official
Advanced
viverseofficialviverseofficial
2

threejs-asset-art

Modify Three.js materials, textures, and procedural geometry in static templates.

Official
Intermediate
video-production-buddyvideo-production-buddy
602

threejs-animation

Implement Three.js 3D animation workflows with skeletal, morph, and crossfade blending.

Official
Intermediate