๐ฃ๐ฟ๐ฒ๐บ๐ถ๐๐บ ๐ฅ๐ฒ๐ฎ๐ฐ๐ ๐ญ๐ต ๐ ๐ถ๐ฐ๐ฟ๐ผ-๐๐ป๐๐ฒ๐ฟ๐ฎ๐ฐ๐๐ถ๐ผ๐ป๐
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