Scroll effect

Fanned Steps on an Arc

by Vanguardia · motionprompts.dev

A sticky-pinned scene where ticket-shaped step cards rest on the rim of a giant wheel below the viewport and roll through it as you scroll: each card swings up from the right, passes upright through the centre and swings off to the left, staying tangent to the arc. One ScrollTrigger writes every position with `gsap.set` from trigonometry — no tween, no timeline on the cards, so the smoothing comes entirely from Lenis. The radius is derived from viewport width (never a constant) and the opacity falloff is deliberately gentle, because both are the parameters that empty the stage when set wrong. Cards are masked into tickets with two radial-gradient notches. A thin progress bar is the only cue of position inside a pinned section. Reduced motion drops the arc and stacks the steps.

Type: Web motion
Framework: GSAP
Trigger: scroll

Save with a free account Customize for your product

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: gsap
Complexity: 1/5
Pinned: no
Reduced motion: handled
Libraries: gsap, ScrollTrigger, lenis

sticky-pinned scene over a 300svh track where N ticket cards sit on a wheel of radius max(560, innerWidth*0.7) across a 0.9pi arc; a single ScrollTrigger onUpdate remaps progress and writes x/y/rotation/opacity/scale with gsap.set — no tween, no scrub, smoothing comes only from Lenis; the vertical component of the arc is squashed to 0.55

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev14,255 charsCustomize

# Fanned Steps on an Arc — a sequence that rolls through the frame on a giant wheel

## Goal

Build a pinned section where **step cards rest on the rim of an en…

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.