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
- Wrap-based positioning that eliminates layout recalculations
- Configurable grid dimensions, gap spacing, and card sizes
- Smooth deceleration curve that feels natural
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 captures drag and touch input, converting it into velocity values. Each card's position wraps around the grid boundaries using modular arithmetic. Distance from the viewport center determines each card's scale factor, creating the fisheye effect. Momentum is calculated from the release velocity and gradually decays with configurable friction.