Slider

Story World Carousel Slider

by Vanguardia · motionprompts.dev

A fullscreen click-advanced carousel where each click slides the current image left (x:-500) while the next slide is revealed by animating its clip-path from a collapsed right edge to full, its image easing in from x:250. All tweens use a custom GSAP 'hop' CustomEase, and a horizontal 'pm' timeline animates flex-grow so the active hour label expands while the others collapse, looping infinitely.

Type: Web motion
Framework: GSAP
Trigger: click
Duration: 0.3–1.5s

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: custom
Complexity: 1/5
Pinned: no
Reduced motion: not handled
Libraries: gsap, CustomEase

click-advanced clip-path wipe: the incoming slide's clip-path opens left-to-right over 1.5s on the custom 'hop' ease while its image counter-slides from x:250 to 0 and the outgoing image drifts to x:-500 — a parallax offset between wipe edge and image. In parallel every hour label in the .timeline shifts its flex-grow one slot down the 5/4/3/1.5/1/0 ladder on the same 1.5s 'hop', so the hour strip re-proportions as one continuous width redistribution rather than a translate.

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev19,744 charsCustomize

# Story World Carousel Slider — Click-Advanced Clip-Path Reveal + Animated Hour Timeline

## Goal
Build a **fullscreen, click-advanced photo carousel** on a bla…

The build prompt

More like this

A one-line prompt for an inference startup launch

UX Decision Explainer Animation

Motion Design Showreel Reaction Video

SaaS launch video for a product Opus picks

Product video for Distilbook

Squad.so SaaS Launch Video

Fresh recipes, every week.