Scroll-driven storytelling with GSAP
A single-origin coffee brand told entirely through scroll. As you move down the page the name pins and dissolves, mountain ridges drift in parallax, a gallery scrolls sideways and the numbers count up — the motion craft behind agency-grade websites.
The technique
Two libraries do the work. GSAP with ScrollTrigger links every animation to the scroll position: pinning sections, playing them forward and back as you move, and driving the horizontal gallery. Lenis smooths the scroll itself so nothing snaps. Everything runs at 60 frames per second, weighs about 50 KB, and falls back to a clean static page when reduced-motion is requested.
How it's built
GSAP
GSAP is the animation engine. It sequences the entrance, spreads and dissolves the name, staggers the text reveals and counts the numbers up — all with precise, frame-perfect timing that plain CSS transitions can't reach.
ScrollTrigger
ScrollTrigger is the GSAP plugin that ties animations to the scroll position. It pins a section in place, plays an animation forward and back as you scroll, and turns a vertical scroll into the horizontal gallery — the backbone of every scroll-linked effect on the page.
Lenis
Lenis smooths the scrolling itself. Instead of the browser's abrupt jumps, the page glides with a subtle inertia, synced frame by frame with the animations. It's the small detail that makes the whole thing feel premium rather than jumpy.
What it's for
This is the kind of motion that makes a brand, product launch or portfolio feel crafted rather than templated — and the sort of detail visitors remember. At Nexe Labs we build it custom, tuned to load fast and work on any device. If you want a site that moves like this, let's talk.