React › Animation in React (Framer Motion & React Spring)

How do you keep animations smooth and avoid hurting performance in a React app?

Advanced

Answer

Animations run smoothly when they only change properties like transform and opacity, since browsers can handle those using the graphics card without recalculating the whole page layout. Animating properties like width or top forces the browser to redo layout work on every frame, which can make the animation feel choppy, especially on lower powered devices.

// Smooth, uses the graphics card
<motion.div animate={{ x: 100, opacity: 1 }} />

// Slower, forces layout recalculation on every frame
<motion.div animate={{ left: '100px', width: '200px' }} />

Real-world example A team notices their sidebar animation feels laggy on older phones, and fixes it by switching from animating the width property to animating a transform scale instead, which runs much smoother.

Common follow-ups: How do you measure whether an animation is actually causing performance problems?;What is the difference between the CPU and the GPU when it comes to running animations?

Performance (memo/useMemo);React DevTools & Debugging