Photo Stack Gallery
A tight stack of photos that unfolds into a strip and one large featured image on click. Click a strip photo to promote it to the feature - the one it replaces slides straight back into the strip.
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 first version sent every photo along a path that swung past its spot and curved back into it. Going out to the strip that looked fine, but closing it looked wrong - a card would fly through the place it was meant to land and come back for it. It read like bouncy easing, but the easing was never the problem. It was the shape of the path. Now each photo bows out sideways on the way across and stops when it arrives.
The other decision worth knowing is what happens when you close it. The pile doesn't go back the way it started - whichever photo you were just looking at ends up on top, so the stack remembers where you left off.
Past that it's yours. Drop in your own photos and copy, put the strip on the left or the right, and set how wide the photos curve on their way over. Clicking one in the strip moves it into the big frame and the photo it replaces drops into the slot it came from, so you can go through the whole set without closing anything.
What you'll need.
Install
- GSAP
- MotionPathPlugin
- 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 Photo Stack Gallery work with React and Vue?
- Photo Stack Gallery 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 Photo Stack Gallery?
- Yes. Photo Stack Gallery 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 Photo Stack Gallery without editing code?
- Photo Stack Gallery exposes 6 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 Photo Stack Gallery free?
- Photo Stack Gallery 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 Photo Stack Gallery is not right for my project?
- Annnimate comes with a 14-day money-back guarantee. If Photo Stack Gallery 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 Photo Stack Gallery in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Photo Stack Gallery on as many projects as you build, with no attribution required.
- Does Photo Stack Gallery 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.
