Grid Chapters in Vue.
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.
Install Grid Chapters in your Vue project
Grid Chapters ships as a copy-paste Vue 3 single-file component. The only dependency is GSAP - Vue's reactivity and lifecycle hooks replace the React useGSAP adapter, so no extra package is needed.
Where it goes in your Vue app
Grid Chapters is a leaf-level interactive component. Drop it into any page, layout, or other component. It works in Vue 3 + Vite, Nuxt 3, and any standalone Vue setup.
In Nuxt, no special handling is needed - the component is client-safe and self-cleaning. If you want to ensure it never runs on the server (rare), wrap your usage in <ClientOnly>.
The component uses the <script setup> composition API and TypeScript-friendly defineProps.
Common questions
- Does Grid Chapters work in Nuxt 3?
- Yes. Drop it into any page or component. The component is client-safe; Nuxt handles the SSR boundary automatically. If you want explicit client-only rendering, wrap in
- Does Grid Chapters work with Vue 2?
- No - the component uses the Vue 3 Composition API and
Grid Chapters for Vue - GSAP component | Annnimate