animate

Start by auditing the feature for missing feedback and abrupt state changes, then plan a hero moment plus feedback and transition layers. Implement with CSS transitions for simple state changes and Framer Motion or GSAP for complex sequences, animating only transform and opacity.

Use ease-out curves like cubic-bezier(0.25, 1, 0.5, 1) for natural deceleration. Keep feedback at 100-150ms, state changes at 200-300ms, layout changes at 300-500ms, and avoid bounce or elastic curves which feel dated.

Yes, respecting prefers-reduced-motion is mandatory. A media query reduces animation and transition durations to near zero, and non-animated alternatives are provided so motion-sensitive users get an equivalent experience.

Jank happens when animating layout properties like width, height, top, or left, which trigger expensive reflows. Animate only transform and opacity for GPU acceleration, use will-change sparingly, and verify 60fps on target devices.

Avoid animation when it has no clear purpose, when it blocks user interaction, or when the audience includes motion-sensitive users without alternatives. One well-orchestrated hero moment beats scattered animations everywhere, which cause fatigue.