Modular Carousel
What it does
A click-driven modular image carousel: each click advances a horizontal strip of slide titles via a 2s gsap.to power4.out tween, while two split image panels (top/bottom, shaped with CSS clip-path polygons) are freshly injected and revealed by animating their clip-path and scale from collapsed to full with a 0.15s stagger. Hovering the image widens the top/bottom clip-path windows; excess stacked images are trimmed on tween complete.
How it's built
| Category | slider |
|---|---|
| Tech | gsap |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | yes |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Modular Carousel — click-advanced split-panel clip-path image slider
## Goal
Build a **full-viewport, click-driven image carousel**. The whole page is the button: every click
anywhere advances the slider. Two things happen per click, in parallel: (1) a horizontal strip of
big centered slide **titles** slides one slot to the left via a slow 2s `gsap.to` `power4.out`
tween, promoting a new title to the highlighted center position; and (2) in a small centered stage
made of **two offset split panels** (a top band and a bottom band cut with CSS `clip-path`
polygons), a **fresh pair of `<img>` elements is injected and revealed** — their own animated
`clip-path` wipes open from the right edge while they simultaneously **scale from 2 → 1**, with a
0.15s stagger between the top and bottom panel. The star effect is this layered clip-path reveal:
each new image is stacked on top of the previous ones and sweeps in; old images are trimmed away
after the tween completes. Hovering the image stage widens the two clip-path windows via a pure-CSS
…Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.