Smooth List Reordering with Framer Motion Layout Animations

Problem: List reordering feels abrupt

When a user drags an item in a list to change its order, the surrounding items often jump to their new positions instantly. This sudden shift removes the sense of continuity and can make the interaction feel unresponsive, especially on touch devices where users expect fluid motion.

Thesis: Use Framer Motion’s layout prop to animate position changes automatically

Adding the layout prop to each motion element tells Framer Motion to measure the element’s DOM box before and after a layout change and animate the transition using its built‑in spring physics. No extra CSS keyframes or manual timing are required.

Worked example: draggable, reorderable list

1. Install Framer Motion (if not already present): npm i framer-motion (run in your project root; requires read/write access to the node_modules folder).
2. Create a simple stateful list in React:

import { useState } from 'react';
import { motion } from 'framer-motion';

const initialItems = ['Apple', 'Banana', 'Cherry', 'Date'];

export default function ReorderableList() {
  const [items, setItems] = useState(initialItems);

  const handleDragEnd = (event, info) => {
    // event.offset.y gives the drag distance from the start point
    const dragOffset = event.offset.y;
    // Approximate item height; adjust if your items have a different size
    const itemHeight = 48;
    const targetIndex = Math.round(dragOffset / itemHeight);
    const clampedIndex = Math.max(0, Math.min(targetIndex, items.length - 1));

    // If the target index equals the current index, nothing changed
    if (clampedIndex === info.activeId) return;

    const updated = [...items];
    const [moved] = updated.splice(info.activeId, 1);
    updated.splice(clampedIndex, 0, moved);
    setItems(updated);
  };

  return (
    

      {items.map((text, index) => (
         handleDragEnd(e, { activeId: index })}
          style={
            background: '#f0f0f0',
            padding: '12px',
            marginBottom: '8px',
            borderRadius: '4px',
            cursor: 'grab',
          }
          whileTap={{ scale: 0.97 }}
        >
          {text}
        
      ))}
    
  );
}

Key points:

• The layout prop on each motion.li enables automatic animation of position and size changes.
• The drag prop makes the item draggable; onDragEnd updates the order in state.
• When the state changes, React re‑renders the list with a new order; Framer Motion intercepts the layout shift and animates the movement of all affected items using its FLIP‑based technique.

Trade‑off and limitation

Layout animations are inexpensive for typical lists, but each animated element forces Framer Motion to read its bounding box twice per render (measure‑then‑animate). With hundreds of items or deeply nested component trees this can contribute to layout thrashing and lower frame rates on low‑end devices. To mitigate:

• Apply layout only to the elements that actually change position or size.
• Keep the animated subtree shallow; avoid wrapping large containers with layout when only a few children move.
• Profile with React DevTools Profiler or the browser’s Performance tab to watch for prolonged forced synchronous layout events.

Verification steps

1. Render the list in a development build and open React DevTools → Profiler. Record a short drag‑and‑drop interaction; look for minimal “Layout” spikes.
2. Visually confirm that while dragging, the other items glide smoothly rather than jumping. The default spring animation gives a gentle overshoot and settle.
3. Disable the layout prop on the motion.li (remove the attribute) and repeat the drag. Observe the instant snap; re‑enable the prop to see the smooth transition again. This A/B check isolates the effect of the layout prop.

Actionable closing

If you need a reorderable list that feels native, start by adding layout to each motion item and pair it with the drag prop. Test on your target devices, watch for layout thrashing in the profiler, and limit the prop to the smallest set of elements that actually move. With those guards in place, Framer Motion’s layout animation gives you a performant, zero‑CSS way to deliver fluid list reordering.