animate

Use a CSS transition on opacity and transform with a strong ease-out curve like cubic-bezier(0.23, 1, 0.32, 1) over 150-250ms. Set transform-origin to the trigger element so the panel scales out of what was clicked, and start from scale(0.95) with opacity 0 rather than scale(0).

Use CSS transitions for hover, press, and state toggles, and CSS @starting-style for mount animations. Reach for Motion only when you need springs, layout animations, exit animations, or gesture-driven values that users can interrupt mid-motion.

Skip animation for actions triggered 100+ times per day, such as keyboard shortcuts or command palette toggles. Frequent interactions need instant state changes; the delight budget belongs to rare, first-time moments like onboarding or celebrations.

Frame drops happen when animating layout properties like width, height, or top, or when using Motion's x/y/scale shorthand props which are not hardware-accelerated. Animate only transform and opacity, and in Motion pass the full transform string such as translateX(100px).

Wrap motion in a @media (prefers-reduced-motion: reduce) block that keeps opacity and color transitions but removes transform-based movement. Reduced motion means fewer and gentler animations, not zero, so transitions that aid comprehension should remain.

Track pointer position with pointer capture, dismiss on distance threshold or flick velocity above 0.11, and settle with a spring config like duration 0.5 and bounce 0.2. Add multi-touch protection and damped resistance past boundaries so interrupted drags keep their velocity.