Drag & Snap
Creates smooth section-based scrolling with drag interactions and auto-snap alignment. Perfect for presentations, galleries, and mobile-like navigation experiences.
Make it with Workshop
Build your own component with AI
Creates smooth section-based scrolling with drag interactions and auto-snap alignment. Perfect for presentations, galleries, and mobile-like navigation experiences.
Make it with Workshop
Build your own component with AI
This component has a free version—try it out to see if it fits your needs.
Drag & Snap creates smooth, section-based scrolling with intuitive drag interactions and intelligent snapping behavior. The component transforms regular scroll areas into engaging experiences where content automatically aligns to perfect viewing positions. Features customizable drag effects with optional elasticity, auto-scroll functionality, and advanced inertia controls that adapt to different input devices for optimal user experience.
Customizations
Content Sections - Add frames that become snap points
Drag Interaction - Enable/disable mouse and touch dragging with visual feedback
Elasticity Effect - Optional rubber-band bounce at content boundaries
Snap Behavior - Automatic alignment to nearest content section
Auto-Scroll Timer - Configurable automatic progression with infinite loop option
End Behavior - Choose between stopping at edges or infinite cycling
Inertia Sensitivity - Platform-specific scroll speed thresholds for Mac and Windows
Viewport Sizing - Control whether children fill container or use viewport dimensions
Interaction Blocking - Disable overlapping frame interactions when needed
