emil-design-eng

Use ease-out curves for entering elements so movement starts immediately, keep UI animations under 300ms, and add transform: scale(0.97) on :active for press feedback. Custom cubic-bezier curves like cubic-bezier(0.23, 1, 0.32, 1) feel stronger than built-in CSS easings.

Use ease-out for elements entering the screen and ease-in-out for elements moving on screen. Never use ease-in for UI animations because the slow start makes interfaces feel sluggish. Keep dropdowns at 150-250ms and modals at 200-500ms.

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 interactions and gestures that can be interrupted mid-animation, but use full transform strings instead of x/y props for hardware acceleration.

The default transform-origin: center makes popovers scale from the middle instead of their trigger. Set transform-origin to the trigger location, such as var(--radix-popover-content-transform-origin) in Radix UI. Modals are the exception and should stay centered.

Skip animation for actions users perform 100+ times per day, such as keyboard shortcuts and command palette toggles, since animation makes repeated actions feel slow. Also avoid animating keyboard-initiated actions entirely, as Raycast demonstrates with its instant open and close.

Wrap movement animations in a @media (prefers-reduced-motion: reduce) block and remove transform-based motion while keeping opacity and color transitions that aid comprehension. In React, use the useReducedMotion hook to conditionally disable positional animation values.