emil-design-eng

Use ease-out curves instead of ease-in, keep UI animations under 300ms, and add press feedback like transform: scale(0.97) on :active. Ease-out shows immediate movement at the moment users watch most closely, making the interface feel faster at identical durations.

Use a strong custom ease-out like cubic-bezier(0.23, 1, 0.32, 1) for entering elements such as dropdowns and modals. Built-in CSS easings are too weak; resources like easing.dev offer stronger variants of standard curves.

Use CSS transitions for predetermined animations and rapidly triggered UI since they run off the main thread and are interruptible. Framer Motion's x/y shorthand props are not hardware-accelerated; use the full transform string or springs for interruptible gesture-driven motion.

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 never start entrance animations from scale(0); begin at scale(0.95) with opacity 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, hooks like useReducedMotion let you conditionally disable positional animation values.