animate

Animate opacity and transform with a 150-250ms strong ease-out curve like cubic-bezier(0.23, 1, 0.32, 1), starting from scale(0.95). Set transform-origin to the trigger element so the panel appears to grow out of what was clicked.

Use CSS transitions for hovers, presses, and state toggles, and CSS animations for predetermined motion that must stay smooth under load. Reach for Motion only when you need springs, layout animations, exit animations, or gesture-driven values.

Skip animation for actions triggered 100+ times per day, such as keyboard shortcuts or command palette toggles. Frequent interactions should use instant state changes, since even fast animation adds perceived latency at that frequency.

Frame drops come from animating layout properties like width, height, or top instead of transform and opacity, or from using Motion's x/y/scale shorthand props. Use the full transform string and GPU-composited properties to stay off the main thread.

Wrap motion in a prefers-reduced-motion media query that keeps opacity and color transitions but removes transform-based movement. Reduced motion means fewer and gentler animations, not zero, so comprehension aids still work.

Track drag distance and velocity, dismissing on a threshold or flick velocity above roughly 0.11, and set transform directly on the dragged element. Settle with a spring config like duration 0.5 and bounce 0.2 so interrupted drags keep their velocity.