Curtain Slider
A full-bleed image slider where each slide change plays a staggered curtain: the outgoing image is divided into twelve columns and each column's clip edge wipes sideways one after another, revealing the next image settling into place beneath. Title, chapter label, and index roll between slides, with arrow, drag, and keyboard navigation built in.
One of 72 GSAP components in React, Vue and HTML.
On mobile
Curtain 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.
How it's built.
This started as a wall of real 3D prisms, like the rotating billboards you see in stadiums. It looked the part but it fought me the whole way - every column cropped the photo a little differently, so the image never quite lined up as one piece. So I flattened it: the picture is still split into columns, but each one stays put and just wipes away in place, one after the other. The photo stays perfectly whole right up until the moment it leaves.
Two things made it feel right. The wipe and the ripple both follow the direction you're moving, so going forward and going back read as two different gestures instead of one replayed effect. And each column's wipe runs a touch past its own edge, because stopping exactly at the edge left a hair of the old image hanging on for a beat before it vanished.
The rest is yours. Drop in your own images and titles, set how many columns the curtain has - a few wide ones feel bold, lots of narrow ones ripple - how fast it moves, and whether it advances on its own. It swipes on phones, the arrows are built in, and you can click through as fast as you like without it tripping over itself.
What you'll need.
Install
- GSAP
- 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 Curtain Slider work with React and Vue?
- Curtain 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 Curtain Slider?
- Yes. Curtain 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 Curtain Slider without editing code?
- Curtain Slider 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 Curtain Slider free?
- Curtain 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 Curtain Slider in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Curtain Slider on as many projects as you build, with no attribution required.
- Does Curtain 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.
