Kinetic Drag Gallery
A draggable image gallery with momentum physics and motion blur. Auto-scrolls smoothly, responds to drag in any direction. Mobile-optimized.
Made with Workshop
Build your own component with AI
A draggable image gallery with momentum physics and motion blur. Auto-scrolls smoothly, responds to drag in any direction. Mobile-optimized.
Made with Workshop
Build your own component with AI
About the component
The component is fully customizable through the following properties found on the right panel:
Images – Upload your image array
Image Fit – Choose how images display (fill, cover, contain, fit, scale-down)
Small Images – Toggle for mobile-optimized image sizing
Auto Scroll – Enable/disable automatic scrolling
Speed – Control auto-scroll velocity
Auto-Scroll Angle – Set scroll direction from 0-360 degrees
Pause on Hover – Stop auto-scroll when users hover over the gallery
Motion Blur – Enable velocity-based blur effects
Blur Intensity – Adjust motion blur strength
Image Scale – Control individual image sizing
Image Gap – Set spacing between images in pixels
Background – Customize gallery background color
Usage
To use the component, simply add it to your Framer project and customize the properties as needed. The drag, momentum, and auto-scroll features will automatically work. Motion blur responds to scroll velocity—faster movement creates more blur. This provides an easy way to add an engaging, interactive gallery to Framer websites that keeps users exploring without any coding required.
