Grid Chapters
A three-chapter scroll story built on a visible grid, with an image and a headline for each chapter. The text stays pinned in the center and swaps line by line as you cross into each chapter, while the images drift past at their own speeds.
One of 85 GSAP components in React, Vue and HTML.
On mobile
Take the free components with you.
In React, Vue and HTML, in your inbox, ready when you're back at your desk.
Where this component came from.
We built it for annnimate.com, our own site, and kept it in the library once it earned its place. The same code runs in production today.
How it's built.
The text sits pinned in the middle while the chapters scroll past it, and the whole build hangs on one question: when exactly does the next chapter take over? The first version swapped at a fixed line across the screen and it never felt right - sitting near that line could flick the text back and forth. So now the grid triggers against the text itself: scrolling down, a chapter takes over when its border reaches the bottom of the words, and scrolling back up it hands back when the border comes down to the top of them. The text block is its own buffer, so the swap can't flicker, and it always slides in the direction you're actually going.
The old headline leaves line by line and the new one rises in from underneath a beat later, and it holds up when you fling the page around fast. The images never wait for any of that - each one drifts at its own slightly different speed the whole way through.
Past that it's yours. Set the copy and images per chapter, how fast the swap runs, how tightly the lines follow each other, and how strong the image drift is - including how different each chapter's drift feels from the others. On a phone it stacks into simple blocks and keeps the drift.
What you'll need.
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
Frequently asked
- Does Grid Chapters work with React and Vue?
- Grid Chapters ships as React (Next.js included), Vue 3 (Nuxt included), plain HTML/CSS/JS - the same animation in each format. The React version uses the official useGSAP hook with cleanup handled; the Vue version is a real single-file component with <script setup>.
- Do I need GSAP to use Grid Chapters?
- Yes. Grid Chapters is built on GSAP directly, and GSAP has been 100% free for commercial use, including every plugin, since version 3.13. The component page lists exactly what to install.
- Can I customize Grid Chapters without editing code?
- Grid Chapters exposes 5 tunable controls in the Customize panel on this page - drag the values, watch the live preview respond, and the code you copy carries your exact settings.
- Is Grid Chapters free?
- Grid Chapters is part of the Annnimate Library, a paid subscription (from EUR 20/month billed quarterly, or EUR 199/year). The live preview and customization run free on this page; the paste-ready code is for members.
- What if Grid Chapters is not right for my project?
- Annnimate comes with a 14-day money-back guarantee. If Grid Chapters or the library does not fit your project, reply to your receipt within 14 days for a full refund, no questions asked.
- Can I use Grid Chapters in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Grid Chapters on as many projects as you build, with no attribution required.
- Does Grid Chapters respect prefers-reduced-motion?
- Yes. Every Annnimate component handles prefers-reduced-motion via gsap.matchMedia, so users who opt out of motion get an effectively instant, readable state.
