skills.rest
ElementTech
ElementTechCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-animation

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

2|Updated Jan 30, 2026
Search Tags:#animation#threejs#keyframes#morph-targets#blending#gltf#skeletal-animation
One-click install
npx skills add https://github.com/ElementTech/create-threejs-game --skill threejs-animation-elementtech
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/ElementTech/create-threejs-game/tree/main/template/.claude/skills/threejs-animation
Command: npx skills add https://github.com/ElementTech/create-threejs-game --skill threejs-animation-elementtech

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js developers often struggle to coordinate keyframe-driven motion, skeletal animation, and morph target blending across multiple assets. This Skill provides a ready-to-use framework to define, organize, and execute animation workflows, enabling consistent behavior across scenes and GLTF content.

Core Features & Use Cases

  • AnimationClip, AnimationMixer, and AnimationAction usage patterns for playing and blending clips.
  • Support for GLTF animations extracted from loaded models and procedural motion.
  • Bone-based animation, morph target blending, and cross-fade transitions.
  • Practical patterns for loading, playing, and synchronizing animations in interactive apps.

Quick Start

Load a GLTF model with animations and start its first animation clip.

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 Three.js animations from a loaded GLTF model?▼

You can play and blend Three.js animations using AnimationMixer and AnimationAction instances extracted from a loaded GLTF model. This Skill provides structured APIs to load GLTF clips and execute cross-fade transitions between them consistently.

What is the best way to coordinate skeletal animation and morph target blending in Three.js?▼

The best way to coordinate skeletal animation and morph target blending is using the AnimationClip framework. This Skill provides patterns for targeting bones and blending morph targets within a unified animation workflow.

How does AnimationMixer work with AnimationAction for keyframe-driven motion?▼

AnimationMixer schedules and updates keyframe-driven motion, while AnimationAction controls the playback state of individual clips. This Skill structures their usage to manage playing, pausing, and synchronizing multiple animation actions.

Can I synchronize multiple keyframe animations across different objects in a Three.js scene?▼

Yes, you can synchronize multiple keyframe animations across a Three.js scene by structuring playback around AnimationMixer updates. This Skill provides patterns for coordinating and timing multiple clips within interactive applications.

Does this Three.js animation approach support both procedural motion and GLTF clips?▼

Yes, this Three.js animation approach supports both procedural motion and GLTF clips. The framework allows you to define procedural keyframes and extract packaged animations from loaded GLTF assets within the same workflow.

Why do my Three.js morph target animations fail to blend smoothly during transitions?▼

Morph target animations fail to blend smoothly when transitions are not properly managed by AnimationAction cross-fades. This Skill provides structured API patterns for executing smooth cross-fade transitions across keyframe and morph clips.

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
mitgar14mitgar14

threejs-animation

Animate Three.js objects, clips, and rigs in real time.

Community
Intermediate
sbalagan22sbalagan22

threejs-loaders

Coordinate GLTFLoader, TextureLoader and HDR/EXR asset loading with progress tracking for 3D scenes and games.

Community
Intermediate
efekrbasefekrbas
41

threejs-animation

Design and control Three.js animations with keyframe tracks, GLTF playback, and blending.

Community
Advanced