Scroll-Scrubbed GLB Motion Trail — Free GSAP ScrollTrigger + Three.js Skeletal Animation

A single scrubbed skeletal pose reads clearly, but it loses all sense of *motion* — you can't tell which way a limb was moving a moment ago. This snippet fixes that by cloning the same rigged model three times, giving each clone its own independent AnimationMixer, and scrubbing all three from the same scroll position at slightly staggered offsets — producing a real, readable motion trail built entirely from genuine baked animation data, not a fake shader-based afterimage effect.

Why `SkeletonUtils.clone()`, not `Object3D.clone()`

A skinned mesh's pose depends on its skeleton — a hierarchy of bone objects the mesh's vertices are weighted against. Three.js's plain Object3D.clone() performs a shallow clone that does *not* correctly rebuild an independent skeleton and re-bind the cloned mesh to it; all clones would end up sharing (and fighting over) the same bones. THREE.SkeletonUtils.clone() — loaded here as a fourth Three.js addon script — exists specifically to solve this, producing a real, independently-posable rig from a single source scene.

Three mixers, one shared clip

Each of the three cloned rigs gets its own THREE.AnimationMixer and its own clipAction() built from the exact same loaded AnimationClip — the animation *data* is shared (there's only one clip, decoded once), but each mixer's playback time is entirely independent, which is what lets the trailing ghosts sit at a different point in the clip than the live rig.

`mixer.setTime()`, offset per rig

setClipTime(progress) calls rig.mixer.setTime() for all three rigs on every scroll update, but subtracts each rig's own lag value (a small fraction of the clip's duration) from the current scroll progress before converting to clip time. The live rig has lag = 0; the two ghosts trail 4.5% and 9% of the clip behind it — close enough to read as a genuine, connected motion trail rather than three disconnected poses.

Translucent, non-depth-writing ghost materials

Each ghost rig's mesh materials are cloned (never shared with the live rig or each other), tinted toward purple, and set to a low opacity with depthWrite = false — the last part matters because a fully opaque, depth-writing ghost mesh directly overlapping the live mesh would produce ugly z-fighting artifacts; disabling depth writes on the translucent ghosts lets them blend cleanly behind and around the live pose instead.

The unpaused-action rule still applies, per rig

Every rig's action.play() call is left unpaused for the same reason as the single-rig walk-cycle snippet: pausing an AnimationAction also blocks Three.js's internal pose evaluation inside setTime(), not just its own per-frame advance. Since the render loop never calls any rig's mixer.update(delta), nothing auto-advances any of the three rigs on its own — scroll's setTime() calls remain the only thing driving all three.

A different asset than the Fox turntable snippet, deliberately

This snippet loads Khronos' Cesium Man sample asset rather than the Fox used in scroll-scrubbed GLB walk cycle — a different real skeletal rig and clip, specifically to demonstrate the technique generalizes rather than being tied to one specific sample file.

Zoom is opt-in, not a hijacked scroll wheel

OrbitControls' built-in wheel-zoom is turned off, with zoom reimplemented as a slider plus Ctrl/Cmd + scroll, exactly like every other snippet in this family, so a plain scroll always advances the page.

Customizing it

Adjust RIG_COUNT and GHOST_LAG for a longer or tighter trail, swap MODEL_URL for any other animated .glb, or pair this with scroll GLB camera flythrough for a longer scroll narrative around a real animated character.