Process Rail
A row of steps along a line. As you scroll, a small bead draws the line behind it and each step lights up as the bead reaches it, its number rolling in and its image fading in underneath and staying. For how-it-works, onboarding and process sections.
One of 97 GSAP components in React, Vue and HTML.
On mobile
Process Rail is in the free Starter Pack.
This exact component in React, Vue and HTML, in your inbox, ready when you're back at your desk. No card, no trial.
How it's built.
The first version drew the line a little ahead of the bead, and it read as two things out of step: a line racing off and a dot chasing it. The bead is now the pen. The line draws over exactly the same stretch of scroll the bead travels, so wherever the bead is, the line ends there, and the faint dotted route underneath is the only hint of where it is going next.
Only the bead and the line follow the scroll. Everything a step does when the bead reaches it, the card brightening, the image fading and scaling up from slightly small, the number rolling into its slot, plays as normal motion a beat apart, and plays back out if you scroll above the step, because a card or a digit scrubbing half-way reads as broken rather than in motion. Reached steps keep their image and number, so the row fills in behind the bead and reads as a finished sequence at the end. The steps sit in equal columns under the line, the line starts exactly at the first step's left edge, and a step arrives when the bead reaches the middle of its column. Under a phone width the steps stack in equal rows that already hold room for their images, the line runs from the first number to the last, and the block scrolls with the page instead of sticking, because four steps with pictures are taller than the screen.
What you'll need.
Install
- GSAP
- ScrollTrigger
- MotionPathPlugin
- DrawSVGPlugin
- 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 Process Rail work with React and Vue?
- Process 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 Process Rail?
- Yes. Process 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 Process Rail without editing code?
- Process Rail exposes 4 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 Process Rail free?
- Process Rail is one of the free components. It is delivered as part of the Starter Pack ZIP by email - React, Vue, and HTML included, no expiration, no attribution.
- Can I use Process Rail in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Process Rail on as many projects as you build, with no attribution required.
- Does Process 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.
