5 Framer Motion Tips for Buttery-Smooth Animations

Framer Motion is powerful, but it's easy to create janky animations if you're not careful. Here are my top tips for smooth, professional animations.

1. Use Spring Physics

Instead of duration, use spring physics for more natural motion:

<motion.div
  whileHover={{
    scale: 1.05,
    transition: { type: "spring", stiffness: 400, damping: 10 }
  }}
/>

2. Animate Transforms, Not Layout Properties

Animating transform and opacity is GPU-accelerated. Avoid animating width, height, or margin.

3. Use Layout Animations for Reordering

For list reordering or layout shifts, use layout prop:

<motion.div layout />

4. Optimize with will-change

For complex animations, hint the browser:

.animated-element {
  will-change: transform, opacity;
}

5. Reduce Motion for Accessibility

Always respect user preferences:

const prefersReducedMotion = useReducedMotion();

<motion.div
  animate={prefersReducedMotion ? {} : { scale: 1.2 }}
/>

Follow these tips and your animations will be smooth as butter!