animate

Start by auditing the feature for missing feedback, abrupt transitions, and unclear relationships, then plan a hero moment plus feedback, transition, and delight layers. Implement with CSS transitions and keyframes for simple cases, or the Web Animations API, Framer Motion, or GSAP for complex sequences.

Use ease-out curves like cubic-bezier(0.25, 1, 0.5, 1) for natural deceleration, with 100-150ms for instant feedback, 200-300ms for state changes, and 300-500ms for layout changes. Avoid bounce and elastic curves, which feel dated and draw attention to the animation itself.

Use CSS transitions and keyframes for simple declarative animations like hovers and state changes. Use JavaScript options such as the Web Animations API, Framer Motion for React, or GSAP when you need programmatic control or complex sequenced interactions.

Respect the prefers-reduced-motion media query by setting animation and transition durations near zero within a reduce block. Always provide non-animated alternatives so users with motion sensitivity get equivalent feedback without movement.

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