065
AI ready

Arc Offset Gallery

£10 or the whole Vault, £99

An infinite card slider where every card glides along a shallow arc, easing into focus with offset depth, gentle rotation and velocity-led motion.

Observer intermediate
6 more details
infinite-loopcurved-pathmomentumvelocity-reactivesnapoffset-cards

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Arc Offset Gallery demo in new tab

Updated

About this effect

A tactile infinite slider that gives a row of photograph 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.

Arc Offset Gallery - GSAP animation effect preview

What's included

8 items
  • Infinite card loop with extra visual copies added automatically for wide screens
  • 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

5 use cases
  • 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

2 sections

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.

Plugins Observer
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Arc Offset Gallery opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£10 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £99, one payment.

Documentation

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add the gallery to your <body>:

Code snippet omitted: it ships with the download.

3. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

The script discovers every [data-arc-gallery], measures the card pitch, and keeps the rail moving around an infinite coordinate loop. Scroll, drag, swipe, click the optional controls, or use the arrow keys.

Using It With Your Own Design

The effect needs a [data-arc-gallery] root with a [data-arc-viewport], a [data-arc-track], and one or more [data-arc-card] children. data-arc-index should be a zero-based index matching the card order. Wide viewports receive extra visual copies of the collection automatically, keeping the wrap beyond the screen edges. The counter still describes the original collection. Copies are removed when the viewport shrinks or the context is reverted; avoid ID-dependent widgets inside cards. The card itself is the element whose transform is owned by GSAP; put your visual surface inside it.

The demo's photographs, dark grey ground, Mona Sans type, heading and position readout are only presentation. Replace them freely: the card surface can hold anything, as long as [data-arc-card] keeps a fixed width. Optional [data-arc-prev], [data-arc-next] and [data-arc-position] controls are driven when present, and [data-arc-live] can be used as a polite screen-reader announcement.

CSS the effect depends on:

  • [data-arc-viewport] must be position: relative, overflow: hidden, and have a real height. touch-action: none lets horizontal touch dragging reach Observer without the browser taking over.
  • [data-arc-track] must be a container for the cards. JavaScript changes it to an absolute stage, so do not apply a transform to the track or its parent.
  • [data-arc-card] needs a fixed or reliably measurable width. The script uses that width plus the track gap as the infinite loop pitch.
  • Keep card transforms off your CSS. GSAP owns x, y, rotation, scale, scaleX, scaleY, skewX, opacity, filter and zIndex on each card.
  • Include a no-JavaScript layout where the track is a normal flex row and cards are position: relative; the shipped stylesheet does this before .arc-gallery--live promotes the rail to the animated stage.
  • If a card holds an <img>, give it pointer-events: none and -webkit-user-drag: none (the shipped .arc-card__photo does): a native image drag fires pointercancel and ends the flick mid-gesture.

Options

Set these on [data-arc-gallery].

Attribute Values Default Description
data-arc-gallery marker required Identifies an instance
data-arc-intensity 0.4–1.5 1 Scales the velocity lean and squash
data-arc-viewport marker required The clipped, interactive stage
data-arc-track marker required The card container
data-arc-card marker required One card in the loop
data-arc-index zero-based number required Card order used for keyboard focus and current state
data-arc-prev / data-arc-next button optional Move one card pitch in either direction
data-arc-position marker optional Receives the current 01 / 07 style position
data-arc-live live-region marker optional Receives the current card's accessible label

Accessibility

  • Reduced motion: prefers-reduced-motion: reduce skips Observer and the ticker. Cards become a readable horizontal rail with no transforms or blur.
  • No JavaScript: cards remain a normal horizontal flex row and are not hidden behind a script-only opacity gate.
  • Keyboard: the viewport is focusable and Left/Right move one card. During motion, only the centred card is exposed in the tab order and to assistive technology; the surrounding decorative cards are marked aria-hidden so off-screen copies are not announced.
  • Focus styling: use :focus-visible on your card surface and controls; the demo supplies a visible accent outline.
  • Touch: horizontal touch movement and wheel input use the same eased position as pointer dragging.

Dependencies

  • GSAP 3.12+ (demo uses 3.15.0) — gsap.min.js
  • Observer — Observer.min.js

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.