𝗣𝗿𝗲𝗺𝗶𝘂𝗺 𝗥𝗲𝗮𝗰𝘁 𝟭𝟵 𝗠𝗶𝗰𝗿𝗼-𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝗼𝗻𝘀
Bad animations feel cheap. Stuttering numbers and lagging bars happen for one reason. You drive animations through React state. Each frame triggers a re-render. The main thread fails to keep up.
Fix this with MotionValue from the motion library. MotionValue tracks values outside of React. It updates the DOM directly. Your component does not re-render.
Try these three patterns:
Reading Progress: Use useScroll and useSpring. It tracks scroll position without re-renders. useSpring adds momentum.
Count-Up Stats: Use useInView and animate. Add tabular-nums in CSS. This stops digits from jittering.
Gliding Tabs: Use layoutId. Motion moves the element between positions for you. It handles the math.
Always use useReducedMotion. Some users feel sick from movement. Follow these rules:
- Keep motion if the user drives it.
- Remove motion if it happens on its own.
- Snap values to their final state.
Three rules for a polished UI:
- Animate transforms and opacity.
- Use MotionValues to avoid re-renders.
- Treat reduced motion as a priority.
Source: https://dev.to/markyu/premium-micro-interactions-in-react-19-without-the-jank-230b