← Back to Courses
Interactive Course
Three.js + GSAP
A complete, Pro-level course on animating Three.js with GSAP — 24 hands-on lessons covering tweens, easing, keyframes, timelines and control, stagger, the gsap.utils toolkit, material & color animation, pointer-reactive motion with quickTo, the ticker, ScrollTrigger (pinning, scrub, snap), GLTF models, motion paths, and production patterns (context, matchMedia, cleanup). 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
Why GSAP is essential for 3D animation, and to/from/fromTo control
How easing functions create natural motion
Looping motion with repeat, yoyo, and repeatDelay
Multi-step motion with keyframes
Sequencing with timelines, labels, and the position parameter
Full timeline control: play, pause, reverse, seek, timeScale
Lifecycle callbacks to drive scene changes precisely
Animating many objects with stagger and 2D grid ripples
The gsap.utils toolkit: random, wrap, mapRange, snap, interpolate
Animating materials, color channels, emissive glow, and lights
Smooth cinematic camera movements
Pointer-reactive motion with high-performance quickTo
Syncing 3D logic to gsap.ticker
Scroll-driven 3D with ScrollTrigger: scrub, pinning, snap, horizontal
Animating loaded GLTF/GLB models and motion paths
Production patterns: gsap.context, matchMedia, reduced motion, cleanup
Building a complete, cinematic product showcase
Prerequisites
- Basic Three.js knowledge (scenes, meshes, cameras)
- JavaScript fundamentals (variables, functions, objects)
Course Overview
24 Lessons
Master Three.js animations with GSAP in your projects.
1
Foundations
5 lessons
2
Timelines & Sequencing
4 lessons
3
Many Objects & Utilities
3 lessons
4
Materials, Light & Color
1 lessons
5
Camera & Interaction
3 lessons
6
Scroll-Driven
4 lessons
Ready to start learning?
Begin your journey to mastering Three.js animations with GSAP.