Skip to content
motionprompts motionprompts

Méridien Arc Card Scroll

GSAP animation component · Published 2026-07-21 · by vanguardia.dev

Open live demo ↗ Download source

What it does

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.

How it's built

Categoryscroll
Techgsap, lenis
GSAP pluginsScrollTrigger
Complexitypage
Performance costlight
Mobile-safeyes
Scrollhijacks scrolling

scroll pin scrolltrigger arc circular cards intersection-observer lenis counter

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.

# 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 a **circular arc** (like cards resting on the rim of a giant wheel below the viewport) and **rotates through the top of the screen as you scroll** — each card swings up from the right, passes upright through the center, and swings off to the left, staying tangent to the arc the whole way. A large **step counter (01–05)** in the corner slides vertically to stay in sync with whichever card is currently centered. Smooth scroll via Lenis. The card positions are recomputed every frame with trigonometry (`cos`/`sin`) and applied through `gsap.set` — there is **no tween/timeline** on the cards themselves; only the counter uses a tween.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugin `ScrollTrigger`, and `lenis` (npm) for smooth scroll. No other plugins, no framework:
```js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Lenis from "lenis";
```
Register once: `gsap.registerPlugin(ScrollTrigger);`. Wrap all setup in a `DOMContentLoaded` listener. Card positioning is done with a native `IntersectionObserver` (for the counter) plus GSAP.
## Layout / HTML
…

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.