003
AI ready

Infinite Draggable Gallery

£5

Draggable gallery with infinite looping, fisheye center-scale, and momentum physics. Drag any direction to explore: cards near center grow larger.

Observer intermediate
5 more details
draggableinfinite-loopfisheyemomentumwrap
Infinite Draggable Gallery - GSAP animation effect preview

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

Open the demo in a new tab
Open Infinite Draggable Gallery demo in new tab

About this effect

A physics-based draggable gallery that loops infinitely in any direction. Cards near the viewport center scale up with a fisheye lens effect, creating a natural focal point. The gallery uses momentum physics so flicking a card sends the entire grid gliding smoothly to a stop. Works with touch on mobile and mouse drag on desktop.

What's included

9 items
  • Infinite loop in both horizontal and vertical directions
  • Fisheye center-scale effect: items grow as they approach the center
  • Momentum physics with configurable friction and velocity
  • Touch and mouse drag support with consistent behavior
  • GSAP Observer for unified input handling across devices
  • Velocity-reactive card tilt, focus, and saturation
  • Wrap-based positioning that eliminates layout recalculations
  • Keyboard arrow navigation and reduced-motion fallback
  • Smooth deceleration with a soft elastic settle

Perfect for

5 use cases
  • Photography and art portfolio galleries
  • Product catalog browsers
  • Team member or contributor showcases
  • Image mood boards and inspiration walls
  • Interactive media explorers

How it works

1 section

GSAP Observer converts pointer and touch dragging into shared position and release velocity. The original grid is tiled into a 3×3 field, while gsap.utils.wrap keeps its translation inside the center tile for a seamless loop. Each card's distance from the viewport center drives scale, brightness, saturation, and stacking order; release velocity adds directional tilt before easing into a soft settle.

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, 15 September 2026. 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 Infinite Draggable 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.

£5 Standard license, unlimited projects

Browse free effects

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.

Options

Attribute Values Default Description
data-infinite true, false true Tiles the gallery for seamless two-axis wrapping
data-fisheye true, false true Scales and brightens cards near the center
data-fisheye-strength Number 0.3 Amount added to the focused card's scale
data-momentum true, false true Continues movement after release
data-momentum-factor Number 0.4 Throw-distance multiplier
data-drag-speed Number 0.85 Drag sensitivity

Grid Styling

The script reads the computed columns, card dimensions, and gaps before creating its 3×3 tile field. Set those values in CSS:

Code snippet omitted: it ships with the download.

Keep all cards the same size. The effect uses one tile's dimensions as its wrap interval.

Accessibility

  • Add tabindex="0" and a descriptive aria-label to .gallery-wrapper.
  • Arrow keys move the field in consistent steps.
  • Pointer and touch dragging use the same Observer input path.
  • Cloned tiles are hidden from assistive technology.
  • Reduced motion shows the original gallery as a centered static composition.
  • Use meaningful image alt text in the original cards; clones do not repeat it to screen readers.

Dependencies

  • GSAP 3.15.0+
  • Observer

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

Your cart

Your cart is empty

The Vault £99

The Vault library, plus future additions to the library.

Or browse effects, templates or UI elements.