Animouse is a lightweight animation state
machine for Three.js that makes it easy to manage complex
character animations and transitions.
The library supports various state types: simple clip states,
linear and polar blend trees, freeform 2D blending, as well as
event-driven, automatic state transitions, and more.
Explore the examples below to see how to integrate Animouse into
your Three.js projects.
📋 Note: Documentation is actively being
expanded with more detailed guides, API references, and advanced
usage examples.
Character models and animations in examples are provided by
Adobe Mixamo
00. Clip State
Simplest example showing how to play a single animation
using ClipState. Demonstrates basic Animouse functionality
with a character in idle state.
Three.js
Clip State
GLTFLoader
Animouse
View Example
01. Linear Blend Tree
Interactive demonstration of Linear Blend Tree for 1D
animation blending. Slider allows smooth transitions between
5 states: run backward, walk backward, idle, walk forward,
run forward.
Three.js
Linear Blend Tree
GLTFLoader
Animouse
View Example
02. Polar Blend Tree
Advanced 2D animation blending using polar coordinates.
Circular control allows managing movement direction
(left-right-forward) and intensity (idle-walk-run).
Three.js
Polar Blend Tree
2D Blending
Animouse
View Example
03. Freeform Blend Tree
Interactive 2D blending with arbitrary animation
positioning. Cursor control in a square area for blending 4
dance styles and idle state.
Three.js
Freeform Blend Tree
2D Control
Animouse
View Example
04. Event-Driven Transitions
Demonstration of event-driven and automatic state
transitions. Slider controls movement (idle-walk-run),
button triggers jump with automatic return to movement.
Three.js
Event Transitions
State Machine
Animouse
View Example
05. Automatic Transitions
Pure automatic transitions that occur when animations
naturally complete their cycles. Character continuously
cycles through 4 different animations with seamless
blending.
Three.js
Automatic Transitions
Animation Cycling
Animouse
View Example
06. Time-Based Events
Demonstration of time-based events that trigger callbacks at
specific points during animation playback. Features footstep
events with visual indicators that glow when left/right foot
touches the ground.
Three.js
Time Events
Event Callbacks
Animouse
View Example