micro-interactions

Apply a hover state with translateY(-1px) and increased shadow over 150ms, an active state with scale(0.97) over 80ms, and a loading state that fades text to a spinner. Use CSS transitions for simple states and Framer Motion for spring-based or layout animations.

Functional transitions should stay between 100ms and 400ms, with button presses at 100-200ms and modals or panels at 200-300ms. Exit animations should run at 60-75% of the enter duration, and anything over 400ms feels sluggish to users.

Framer Motion suits React projects needing spring physics, layout animations, and shared element transitions. GSAP is better for complex timeline orchestration and framework-agnostic sequencing, while plain CSS transitions handle simple state changes.

Wrap animations in a @media (prefers-reduced-motion: no-preference) query so motion is opt-in, or set animation and transition durations to 0.01ms under the reduce query. In JavaScript, detect the preference with window.matchMedia and skip motion accordingly.

Only animate transform, opacity, filter, and clip-path, since these run on the compositor without triggering layout. Never animate width, height, top, left, margin, or padding, and remove will-change after animations complete to free GPU memory.

Skip animations that are purely decorative, would frustrate users on the hundredth use, or block input during playback. Every animation must serve a function, and the underlying feature must still work when all animation is disabled.