Scroll effect

Méridien Arc Card Scroll

by Vanguardia · motionprompts.dev

A pinned full-screen section where five image cards are laid out along a circular arc and rotate through the viewport as you scroll, driven by ScrollTrigger's onUpdate progress feeding a trigonometric positionCards() function (cos/sin/rotation) via gsap.set, while an IntersectionObserver syncs a vertically sliding step counter (01-05) with the currently centered card using a power1.out tween. Scroll-triggered, smoothed by Lenis.

Type: Web motion
Framework: GSAP
Trigger: scroll
Duration: 0.25–0.3s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Easing: power1
Complexity: 3/5
Pinned: yes
Reduced motion: not handled
Libraries: gsap, ScrollTrigger, lenis

pinned scroll-driven cards rotating along a circular arc: 7 cards (5 content + 2 invisible spacers) placed by trig on a circle of radius innerWidth*2.5 (innerWidth*7.5 below 900px) across a 0.4π arc; ScrollTrigger progress is remapped ((p*(1+7/7.5))-1)*0.75 and applied with gsap.set (x/y/rotation) — no scrub, no tween, so smoothing comes only from Lenis

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev24,628 chars

# Scroll-Driven Arc Card Carousel with Synced Step Counter

## Goal

Build a single full-screen **pinned** section where a row of image cards is laid out along…

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.