Scale Slider
A row of square photos that shrink away toward one edge, with the biggest one cropped right off the screen. Drag it, throw it, scroll the page, or let it drift on its own.
One of 67 GSAP components in React, Vue and HTML.
On mobile
Scale Slider 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.
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 hard part here was the loop. My first version sized each card by its place in the line, so when one recycled it popped in at the edge and left a dead strip of empty space on the left before the next caught up, and it looked broken. What fixed it was sizing every card by where it actually sits across the width instead of which place it's in, and anchoring the whole thing so there's always one card cropping off each edge, the big one on the right and the small one on the left. Now it tiles the space exactly and runs forever with no seam, and each card is the same amount bigger than the one to its left, so the shrink reads even instead of lumpy.
It moves off three things at once, dragging it, a slow drift on its own, and the page scroll, and the scroll gives it a bit of momentum so it glides to a stop instead of freezing the moment you stop scrolling. Past that it's yours. Drop in your own photos, flip which side the big one sits on, set how many show at once and how small the smallest gets before it slides off the edge, and there's an optional depth zoom on the images if you want more from them.
What you'll need.
Install
- GSAP
- Draggable
- InertiaPlugin
- 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 Scale Slider work with React and Vue?
- Scale Slider 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 Scale Slider?
- Yes. Scale Slider 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 Scale Slider without editing code?
- Scale Slider 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 Scale Slider free?
- Scale Slider 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 Scale Slider in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Scale Slider on as many projects as you build, with no attribution required.
- Does Scale Slider 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.
