Framer Motion for layout animation

[oisinlavery]

https://codesandbox.io/s/dnd-kit-framer-motion-layout-example-m6bcm?file=/src/App.tsx

I've managed to integrate DnD Kit with Framer Motion - using Motion for the layout animation (except Drag Overlay)

• I update the items order on DragMove instead of on DragEnd
• Motion is responsible for animating the items into their new positions
• This has the advantage of being able to easily use Motion to reorder the items outside of drag and drop
• We also get Springs and all the other Motion animation APIs

I think there are a couple of places where the APIs could have been more flexible...

Drag Overlay This component adds a lot of convenience but it is quite opinionated in comparison to the rest of the kit. At first it worked like magic but I ultimately ended up working around it.

• It adds opacity style directly to the DragSourceItem
• It caches the DragItem which makes it cumbersome to pass down the DragEnd event to the DragItem

Has a useDragOverlay hook been considered?

• This would allow me to use Motion or any library to animate the position of DragOverlay
• ...and easily apple enter / exit animations

Sortable This is somewhat related to DragOverlay. The SortableItem doesn't have a good way of knowing when the DragOverlay animation has ended.

• The DragOverlay.dragSourceOpacity property is a less than optimal solution to this I think
• Perhaps a Sortable.isSettling property could be added, this would allow the SortableItem to be 100% responsible for it's own layout / styling

By the way, I should have said upfront that I'm absolutely blown away by this library. It's so well thought out and really powerful. Thanks for making it!

[oisinlavery]

Thanks for correcting that title typo 😅

[clauderic]

Hey @oisinlavery, thanks for the kind words!

I haven't had much time to reflect on this feedback yet, but I do agree with you that DragOverlay is somewhat magical, though I would add that it is intentionally magical.

It's meant to make it easy and simple to support complex use-cases that would otherwise require quite a lot of work to implement, such as items being reparented or completely unmounting while dragging.

It's an optional component, it should be feasible to not use it at all and rely solely on useDraggable / useSortable, though admittedly this is a lot more work if you intend to render the draggable/sortable item within a scrollable list, because you'll need to manage transitioning the dragged node to become position: fixed and rendering a placeholder node in its original place to avoid layout shifts.

I also have limited experience working with Framer Motion, I'm actually surprised your example works 😅 I'll give this some more thought and get back to you.

[datner]

Funny this came up. I actually implemented a fully-working very complicated grid with 1000s of items using dnd-kit and framer motion.

I won't lie, it was very hard. But in the end I didn't create any special utilities. Everything I used was already given by framer motion or by dnd kit. Literally, 0 handwritten functions for anything that wasn't business logic. Just a lot of MotionValues, and as you suggested, leveraging layout. I can confirm it can work. I would have shown an example but it is proprietary code..