animate

Start by assessing where motion adds value: missing feedback on actions, abrupt state changes, and unclear spatial relationships. Then implement entrance animations, micro-interactions, and transitions using CSS transitions for simple states and JavaScript for complex sequences.

Use natural deceleration curves like ease-out-quart cubic-bezier(0.25, 1, 0.5, 1) or ease-out-expo cubic-bezier(0.16, 1, 0.3, 1). 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 like the Web Animations API, Framer Motion for React, or GSAP for complex interactive sequences requiring programmatic control.

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 motion-sensitive users get equivalent feedback without movement.

Jank usually comes from 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.