GSAP scroll templates for Next.js
GSAP (with the free-since-2025 ScrollTrigger and SplitText plugins) is the most capable scroll-animation toolkit on the web: pinned sections, scrubbed timelines, character-by-character reveals and frame-perfect video scrubbing all come from one library. The templates below lean on it hard.
Each pairs GSAP ScrollTrigger with Lenis smooth scrolling so the scrubbed motion feels weighted rather than twitchy. Where the centrepiece is a single continuous shot, GSAP drives an all-intra-encoded video's playhead directly from scroll position.
All are Next.js 16 + TypeScript + Tailwind, config-driven, and come with a free Claude Code build prompt plus an optional tested-source download.
10 templates
Ocean Epicure
A scroll-scrubbed chef's film opening into a bright editorial story.
Aurelia
A voyage from above the clouds to a dinner at sea — scroll is the ship.
Demeure
Scroll composes an empty shell into a fully furnished home.
Vesper
Scroll assembles the watch — component by component to the finished piece.
Monolith
The tower builds itself as the page goes down.
Vanta
Orbit to street level — a 420 km scroll dive.
Forma
Drafting-paper storytelling with a red line that draws itself.
Arden
True video scrub through a single golden property.
Meridian
Fly the Amalfi route — boarding pass and all.
Villa Sereno
A house tour that plays as you scroll.
Questions
Is GSAP free to use in these templates?
Yes. As of 2025 the full GSAP toolkit — including ScrollTrigger and SplitText — is free, including for commercial projects. The templates use it under that license.
What does GSAP ScrollTrigger do here?
It links animation progress to scroll position — pinning sections, scrubbing timelines, and driving a video's currentTime frame-by-frame. Lenis smooths the scroll so the scrubbing reads cleanly.