← Back to Courses
Interactive Course
Three.js + Anime.js
A complete, Pro-level course on animating Three.js with Anime.js v4's flattened adapter — 24 hands-on lessons covering motion fundamentals, keyframes, expressive easing, material & shader FX, timelines, advanced stagger, pointer & raycaster interaction, GPU particles, cinematic cameras, scroll-driven storytelling, and production performance patterns. Every lesson ships a live, editable 3D example. Early access price: $15, normally $25.
Lessons24 Lessons
Duration~4 hours
LevelBeginner → Pro
What You'll Learn
Animate a mesh's position, rotation, opacity, scale and color in a single animate() call
Master the flattened property model — x/y/z, rotateX/Y/Z, scale, opacity, color by name
Build multi-step motion with keyframes, from/to values, and relative operators
Control feel with the full easing toolkit — including elastic, back, bounce, and spring
Drive hundreds of objects from one call with function-based values and controlled randomness
Trigger scene changes precisely with lifecycle callbacks and chained sequences
Animate material color, emissive glow, lights, the scene, and shader/TSL uniforms by name
Choreograph scenes with createTimeline(), time positions, and full play/pause/seek/reverse control
Create mesmerizing instanced grid ripples and traveling waves with stagger() and getInstances()
Build real interactivity: pointer-reactive motion and raycaster hover effects
Animate GPU particle systems and direct cinematic camera moves
Scrub entire choreographed timelines with scroll for scroll-driven storytelling
Apply production performance patterns: flash-free initial state, batching, and reduced-motion
Combine every technique into a polished, scroll-driven animated 3D hero scene
Prerequisites
- Basic Three.js (scenes, meshes, cameras)
- JavaScript fundamentals
Course Overview
24 Lessons
Go from your first animate() call to production-grade, interactive, scroll-driven 3D with Anime.js v4's official Three.js adapter.
1
Foundations
5 lessons
2
Expressive Motion
3 lessons
3
Appearance & Materials
4 lessons
4
Choreography
4 lessons
5
Interaction
2 lessons
6
Scenes & Camera
2 lessons
Ready to start learning?
Begin your journey to mastering Three.js animations with GSAP.