Back to The Lab

Lab Experiment

Scroll-driven Animations

Same result, two different approaches. A dot moves horizontally as you scroll once driven by GSAP ScrollTrigger, once by the native CSS

GSAP · ScrollTrigger · scrub0%

scroll down inside this box ↓

gsap.to(dot, { x, scrollTrigger: { scrub: 0.6 } })

scrub: 0.6 the dot follows scroll with a slight lag, smoothed by GSAP's ticker.

CSS · animation-timeline · scroll()
0%

scroll down inside this box ↓

animation-timeline: --css-section

animation-timeline: --css-section a named scroll timeline defined on the scroll container. Both the fill and the dot are animated by the same timeline.