Arc Offset Gallery
An infinite card slider where every card glides along a shallow arc, easing into focus with offset depth, gentle rotation and velocity-led motion.
About This Effect
A tactile infinite slider that gives a row of cards a soft, editorial rhythm. Scroll, drag or use the keyboard and each card travels through a shallow curve: the focused card rises and sharpens while its neighbours drift lower, rotate away and recede into space.
Read the full effect overview
The rail never reaches an edge. A frame-rate-independent GSAP ticker eases toward the input, wraps card positions continuously and settles the nearest card with a quiet snap, so the movement feels deliberate rather than mechanical.
What's Included
- Truly infinite card loop with no duplicated DOM tiles or visible seam
- Shallow arc path that lifts the focused card and lowers cards toward either edge
- Offset rotations, scale, depth, opacity and blur mapped to each card's distance from centre
- Frame-rate-independent buttery easing that stays smooth across different refresh rates
- Gentle velocity lean and squash that add life during a drag without overwhelming the layout
- Wheel, pointer drag, touch drag, previous/next buttons and arrow-key controls
- Nearest-card settle with a soft power3.out landing after an interaction pauses
- Readable horizontal fallback for no-JavaScript and prefers-reduced-motion visitors
Perfect For
- Book, product or editorial discovery rails with a more considered browsing rhythm
- Portfolio project strips where the centre card should feel naturally selected
- Lookbooks and collection pages with offset depth instead of a flat carousel
- Case study galleries that need a gentle, premium sense of movement
- Hero card navigators where infinite browsing should never expose an endpoint
How It Works
Each card starts from an indexed position on a circular coordinate system. The ticker wraps that position into the nearest visible cycle, then maps its distance from the viewport centre onto a parabolic y value, rotation, scale, opacity, z-index and a small blur. The same frame also derives a restrained skew and squash from the eased travel velocity.
Wheel, pointer and touch input update a target position rather than jumping the rail directly. The current position follows that target with time-based exponential easing, so a 60Hz screen and a 120Hz screen settle at the same rate. When input stops, the target is rounded to the nearest card pitch and eased into place; keyboard and button controls use the same path, while reduced motion skips the ticker and restores a readable horizontal rail.
