emil-design-eng

Use ease-out curves for entering elements, keep UI durations under 300ms, and replace built-in easings with custom cubic-bezier curves like cubic-bezier(0.23, 1, 0.32, 1). Avoid ease-in, which delays initial movement and feels sluggish.

Dropdowns and selects should use ease-out at 150-250ms since they enter the screen. Modals and drawers can run 200-500ms with ease-out or an iOS-like drawer curve cubic-bezier(0.32, 0.72, 0, 1). Never use ease-in for UI elements.

Use CSS transitions for predetermined animations and rapidly-triggered UI since they run off the main thread and are interruptible. Use Framer Motion springs for drag gestures and interruptible motion, but note its x/y shorthand props are not hardware-accelerated.

Popovers default to transform-origin: center, which makes them scale from the middle instead of their trigger. Set transform-origin to the trigger location, and start from scale(0.95) with opacity 0 rather than scale(0).

Skip animation for actions seen 100+ times per day, especially keyboard-initiated ones like command palettes. Animation on high-frequency actions makes the interface feel slow and disconnected from user input.

Wrap movement animations in a prefers-reduced-motion media query and remove transform-based motion while keeping opacity and color transitions. In React, use useReducedMotion to conditionally disable positional animation values.