TICO — Scroll-Driven 3D Navigation with BabylonJS
A BabylonJS demo where scrolling drives a camera through a 3DsMax-authored animation exported to GLB. No CSS tricks — pure 3D timeline scrubbing.
Scroll position scrubs a 3D camera animation authored in 3DsMax. The camera path, timing, and easing are all designed in the DCC tool — BabylonJS just drives playback based on scroll progress.
How it works
The animation is a standard 3DsMax Path Constraint baked to keyframes on export. BabylonJS loads the GLB, pauses the animation group, and maps scroll progress (0–1) to the animation timeline via goToFrame().
Scroll events are lerped on each RAF for smooth scrubbing. Touch is supported via touchmove → scrollBy delegation.
Architecture
Two files: main.js (scene setup, scroll binding, main variables) and navigation.js (scroll-position tracking tied to scroll-sections DOM elements). Section count must match scrollSteps values in config.
Key insight
Default ease-in/ease-out keyframe tangents create weird acceleration when scrolling backwards. Fix: set all keyframes to Linear tangents in 3DsMax before export.
GLB is 2.1 MB (original 3DsMax scene: 340 MB). Animation baked at 30fps — halves goToFrame() evaluation cost with no visible quality loss.