Scrubbing a Real Skeletal Animation With Scroll: The mixer.setTime() Trick
Scroll-scrub a real glTF walk cycle with Three.js AnimationMixer.setTime() and GSAP ScrollTrigger — free tutorial with OrbitControls camera and zoom.
Scrubbing a Real Skeletal Animation With Scroll: The mixer.setTime() Trick
Most "3D on scroll" demos rotate a shape. A cube spins, a card tilts, a sphere orbits — all of it is one transform property tied to a scroll-progress number. That's a fine trick, but it's a different problem from what a real animated character needs: a fox with an actual, artist-authored walk cycle baked into its .glb file, where scrolling down should make it walk forward one bone-pose at a time, and scrolling back up should play the exact same walk in reverse — frame-accurate, in both directions, with a visitor free to grab the camera and look around from any angle at any moment. That's the Scroll-Scrubbed GLB Walk Cycle snippet, and it's built on one specific Three.js method almost nobody reaches for by default: AnimationMixer.setTime() . Here it is, working: Grab the code, or open the full editor with live HTML/CSS/JS panels: Scroll-Scrubbed GLB Walk Cycle on FWD Tools . It's Three.js (core, GLTFLoader , and OrbitControls , all loaded from a CDN with no bun…
