# Infinite Draggable Gallery > Draggable gallery with infinite looping, fisheye center-scale, and momentum physics. Drag any direction to explore — cards near center grow larger. Canonical: https://gsapvault.com/effects/infinite-draggable-gallery Live demo: https://gsapvault.com/demos/infinite-draggable-gallery/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | Observer | | Techniques | draggable, infinite-loop, fisheye, momentum, wrap | | Uses Lenis | No | ## Overview 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. ## Features - 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 ## Use Cases - Photography and art portfolio galleries - Product catalog browsers - Team member or contributor showcases - Image mood boards and inspiration walls - Interactive media explorers ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works 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. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Add to your HTML ``:** ```html ``` **2. Add the gallery to your ``:** ```html
Project one
Project two
Project three
Project four
``` **3. Add before the closing `` tag:** ```html ``` ### 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 | ### 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.14.2+ - Observer ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Infinite Draggable Gallery](https://gsapvault.com/effects/infinite-draggable-gallery) - [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects) ## Judge the Code Quality First These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic): - [Image Clip Reveal](https://gsapvault.com/effects/image-clip-reveal.md): A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its editorial caption lands. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt