Feature Rail
A sticky chapter rail with scroll-spy. Chapter names stay pinned on the left while their content scrolls past on the right, with a hairline indicator that slides and resizes to whichever chapter is active.
One of 94 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 rail's whole job is answering one question honestly: which chapter is the visitor looking at right now. One scroll listener walks the chapters on every update and picks the last one whose top has passed the middle of the viewport - a single place deciding a single value. Per-chapter triggers look like the obvious build, but their active ranges overlap, so two of them fight over the answer and the last one to fire wins; the final chapter in particular never gets to win when there isn't a full screen of scroll left below it.
The indicator itself is the signature move: a 1px hairline that slides to the active link's position and resizes to match its height, so it always reads as one continuous mark rather than five separate ones. Each chapter's headline and product image only settle into place once, the first time they scroll into view - the two-tone sentence rises out from under a mask and the photo eases down from a soft zoom, never a crossfade.
On a phone there's no room for a side rail, so it becomes a horizontal strip that scrolls with the page and the indicator flips to a short underline beneath the active name. Clicking any chapter name scrolls to it directly, and the rail can be told to scroll away with the page instead of staying pinned.
What you'll need.
Install
- GSAP
- ScrollTrigger
- SplitText
- CustomEase
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 Feature Rail work with React and Vue?
- Feature Rail 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 Feature Rail?
- Yes. Feature Rail 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 Feature Rail without editing code?
- Feature Rail 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 Feature Rail free?
- Feature Rail 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 Feature Rail is not right for my project?
- Annnimate comes with a 14-day money-back guarantee. If Feature Rail 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 Feature Rail in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Feature Rail on as many projects as you build, with no attribution required.
- Does Feature Rail 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.
