FLIP Technique Eliminates Transform Math But Adds Measurement Overhead

The "layout" prop in Framer Motion implements the First, Last, Invert, Play (FLIP) technique to automatically animate position and size changes without manual transform calculations. When a component's layout shifts due to flex reordering, grid repositioning, or content-driven size changes, Motion captures the First and Last positions, calculates the Invert transform, and Plays the animation. This means toggling an expanded state or reordering a list just works - no coordinate tracking required.

However, this convenience comes with measurable overhead. Every layout-triggering state change forces DOM measurements before and after render, transform matrix calculations, and animation frame scheduling. On large lists or deeply nested component trees, these synchronous layout reads cause jank, especially when multiple elements animate simultaneously.

LayoutId Morphing Requires Render Cycle Orchestration

// ProductGrid.tsx
<AnimatePresence mode="wait" initial={false}>
  {!selectedId && products.map(p => (
    <motion.div 
      key={p.id}
      layoutId={`card-${p.id}`}
      onClick={() => setSelectedId(p.id)}
      style={{ borderRadius: 12 }}
    >
      <motion.img layoutId={`img-${p.id}`} src={p.thumb} />
    </motion.div>
  ))}
  
  {selectedId && (
    <motion.div 
      layoutId={`card-${selectedId}`}
      style={{ borderRadius: 24 }}
      exit={{ opacity: 0 }}
    >
      <motion.img layoutId={`img-${selectedId}`} src={getFullImage(selectedId)} />
      <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
        <ProductDetails id={selectedId} />
      </motion.div>
    </motion.div>
  )}
</AnimatePresence>

Critical Pitfall: Conditional rendering with "mode='wait'" ensures both source and target elements coexist during morph. Without this, React unmounts the source before the target mounts, breaking the transform interpolation. Nested "layoutId" on the image enables independent animation of the thumbnail while the container morphs.

Shared layout animations with "layoutId" create seamless element morphs across component boundaries by interpolating position, scale, and border-radius between matching IDs. This enables native-app-like transitions where a product card in a grid physically morphs into the detail view. The transition feels like one continuous element rather than a fade-replace.

Gesture Animations Run on Main Thread Unlike CSS Transitions

Writing "whileHover={{ scale: 1.05 }}" is cleaner than manual event handlers, but Framer Motion executes these animations in JavaScript rather than delegating to CSS. Browser-native ":hover" transitions with "transform" and "opacity" run on the compositor thread, remaining smooth even when the main thread is blocked by heavy JavaScript execution.

Motion's gesture animations run on the main thread, making them vulnerable to jank during concurrent JavaScript work. For simple hover states or tap feedback, CSS transitions deliver better frame rates. Reserve Motion's gesture system for complex interactions that CSS cannot express: dragging with physics-based constraints, velocity-driven momentum scrolling, or multi-gesture orchestration.

Applied Insight

Use CSS transitions for simple hover and focus states to leverage compositor thread optimizations. Apply Framer Motion's "layout" prop sparingly on components with infrequent layout changes, avoiding deeply nested trees or long lists. Implement "layoutId" morphing for route transitions where the visual continuity justifies the render orchestration complexity. Reserve gesture animations for interactions requiring physics simulation or constraint-based dragging that CSS cannot handle.