Draggable List lets you create beautiful, interactive lists where users can drag items to reorder them. Simply connect any Framer components as list items and the component handles all the drag logic, animations, and reordering automatically.
Drag to Reorder Users can grab any item and drag it to a new position. Other items smoothly animate out of the way, creating a polished, native-feeling interaction.
Dynamic Rotation Items tilt naturally based on where users grab them—grab the left side and it tilts left, grab the right side and it tilts right. This subtle detail adds a tactile, realistic feel to the interaction.
Fully Responsive The component automatically adapts to any screen size. Items respect their container width, so your list looks great on desktop, tablet, and mobile without any extra configuration.
Connect Any Component Use your own custom-designed list items. Connect frames, components, or any design you create—the Draggable List wraps them and makes them sortable.
Customizable Animation Control the gap between items, padding around the list, rotation intensity, and spring animation settings. Fine-tune the feel to match your design system.
Disable Option Need to lock the list? Toggle dragging off with a single property—perfect for view-only states or conditional interactivity.
Property & Description1. Items: Connect your components or frames.2. Gap: Space between items (0-50px).3. Padding: Padding around all items (0-40px).4. Max Rotation: Tilt angle when dragging (0-10°).5. Transition: Spring animation settings.6. Disable Drag: Toggle dragging on/off.
Task lists and to-do apps
Priority ranking interfaces
Playlist or queue management
Kanban card ordering
Settings or preference lists
Navigation menu builders
Any sortable content
Built with Framer Motion's Reorder components
Handles viewport resize automatically
Touch-friendly for mobile devices
Accessible with ARIA labels
No external dependencies beyond Framer Motion
Duopixel Studio
