Infinite Draggable Gallery
Draggable gallery with infinite looping, fisheye center-scale, and momentum physics. Drag any direction to explore — cards near center grow larger.
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
- 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
- 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
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.