Stacking Cards
A stack of photo cards that holds the screen while you scroll. Each new card slides up through a fixed frame and covers the last one, which shrinks back, tilts and sinks out of the way underneath it. A small counter at the bottom of the frame keeps your place, and a click on it jumps to any card.
One of 122 GSAP components in React, Vue and HTML.
On mobile
Stacking Cards 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 card underneath does more than scale back. Its frame closes in from the edges while it tilts and sinks, and the photo inside zooms and turns a little further than the frame does, so the picture keeps filling the shrinking card and it reads as moving away from you instead of just getting smaller. The new card's photo trails it slightly on the way up, so the slide never looks like one flat sheet.
The cards follow the scroll exactly, but the titles and the counter don't. A half-scrolled title looks broken, so each title rises on its own once its card is most of the way in, and the counter rolls its number in the direction you're scrolling.
Set how much scroll each card gets, how far the old card tilts, sinks, zooms and darkens, how much the new photo trails, and how round the corners are. Click any line in the counter and the page scrolls straight to that card.
What you'll need.
Install
- GSAP
- ScrollTrigger
- 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 Stacking Cards work with React and Vue?
- Stacking Cards 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 Stacking Cards?
- Yes. Stacking Cards 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 Stacking Cards without editing code?
- Stacking Cards exposes 10 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 Stacking Cards free?
- Stacking Cards 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 Stacking Cards in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Stacking Cards on as many projects as you build, with no attribution required.
- Does Stacking Cards 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.
