web-animation-design

Use ease-out for elements entering or exiting the screen, ease-in-out for elements already visible that need to move, and ease for hover and color transitions. Avoid ease-in for UI because its slow start delays visual feedback and feels sluggish.

Keep micro-interactions at 100-150ms, standard UI elements like tooltips and dropdowns at 150-250ms, and modals or drawers at 200-300ms. UI animations should generally stay under 300ms, with larger elements animating slightly slower.

Use springs for drag interactions with momentum, interruptible gestures, and elements that should feel alive, since springs maintain velocity when interrupted. CSS transitions work better for simple, predetermined animations and run off the main thread.

Add a @media (prefers-reduced-motion: reduce) query for every animated element that sets animation or transition to none. In Framer Motion, use the useReducedMotion hook to conditionally disable initial animation states.

Shakiness often comes from the GPU/CPU rendering handoff shifting elements by 1px at animation start or end. Adding will-change: transform keeps the element on the GPU throughout the animation and resolves the jitter.

Only animate transform and opacity, since they skip layout and paint stages and run on the GPU. Avoid animating padding, margin, width, height, or blur filters above 20px, which trigger expensive layout recalculations.