Demonstrates how ScrollTrigger can be used with a smooth scrolling library like Locomotive Scroll, including scrubbing and pinning.
This line's animation will
begin when it enters the viewport and finish when its top
edge hits the top of the viewport, staying perfectly in sync
with the scrollbar because it has
scrub: true
This orange panel gets
pinned when its top edge hits the top of the viewport, then
the line's animation is linked with the scroll position
until it has traveled 100% of the viewport's height (end: "+=100%"), then the orange panel is unpinned and normal scrolling
resumes. Padding is added automatically to push the rest of
the content down so that it catches up with the scroll when
it unpins. You can set pinSpacing: false to
prevent that if you prefer.
This panel gets pinned in a similar way, and has a more involved animation that's wrapped in a timeline, fading the background color and animating the transforms of the paragraph in addition to the line, all synced with the scroll position perfectly.