Slider

Meetings Arc Slider

by Vanguardia · motionprompts.dev

A click-driven fullscreen slider showing three cards on an arc (prev/active/next); clicking a side card or a list item fires a 2s GSAP CustomEase 'hop' transition where cards orbit into position while their inner images counter-rotate, the incoming card's clip-path opens from a centered window, the outgoing card scales to zero and fades, and the title swaps via per-character span y-staggers. A blurred background preview image cross-fades and a slow CSS pan animation runs continuously.

Type: Web motion
Framework: GSAP
Trigger: click
Duration: 1–2s

Save with a free account

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-driven arc orbit with clip-path card swap

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev25,804 chars

# Arc Card Slider with Clip-path Reveal & Counter-rotating Images

## Goal
Build a **click-driven fullscreen slider** that shows **three cards laid out on a hor…

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.