Lens Rail
A strip of photos you drag sideways. Whichever one passes the middle grows large, like sliding it under a magnifying glass, then shrinks again as it moves on.
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.
How it's built.
The growing is the easy part. The closer a card gets to the middle, the bigger it gets, and the ones next to it swell a little too, so it reads like one lens moving over the row. The first version stopped there and it looked broken, because a card that grows just spills over its neighbours, the row has no idea it got bigger. So every frame the cards also push apart by exactly the room the growing card claims, plus some extra breathing space around the one in focus.
The bit that took a few rounds was keeping the focused card pinned to the centre line. All that pushing kept nudging it off, worst at the two ends of the row. The fix was to anchor the whole push at the lens itself, so whatever card sits under it simply never moves.
You can set how far the lens reaches, how big the middle card gets, how small the rest go, the spacing, and whether the rail loops forever or has ends. A flick keeps its momentum and lands on a card, and the arrows and keyboard have their own calmer settle.
What you'll need.
Install
- GSAP
- Draggable
- InertiaPlugin
- CustomEase
Concepts
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 Lens Rail work with React and Vue?
- Lens 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 Lens Rail?
- Yes. Lens 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 Lens Rail without editing code?
- Lens Rail exposes 9 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 Lens Rail free?
- Lens 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 Lens Rail is not right for my project?
- Annnimate comes with a 14-day money-back guarantee. If Lens 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 Lens Rail in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Lens Rail on as many projects as you build, with no attribution required.
- Does Lens 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.
