emil-design-eng

Use ease-out curves for entering elements, keep UI animations under 300ms, and add transform: scale(0.97) on :active for press feedback. Avoid ease-in, which delays initial movement and makes interfaces feel sluggish.

Use ease-out for entering elements, such as cubic-bezier(0.23, 1, 0.32, 1), since it starts fast and feels responsive. For on-screen movement use ease-in-out like cubic-bezier(0.77, 0, 0.175, 1); never use ease-in for UI.

Use CSS transitions for predetermined animations since they run off the main thread and stay smooth under load. Use Framer Motion springs for interruptible gestures, but note that x/y shorthand props are not hardware-accelerated; use full transform strings instead.

Popovers often use the default transform-origin: center, making 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 performed 100+ times daily, such as keyboard shortcuts and command palette toggles, since animation makes them feel slow. Reduce or remove animation for elements seen tens of times per day like hover effects.

Use the prefers-reduced-motion media query to remove transform-based movement while keeping opacity and color transitions that aid comprehension. In React, useReducedMotion from Motion lets you conditionally disable positional animation values.