emil-design-eng

Use ease-out curves so movement starts immediately, keep durations under 300ms, and animate only transform and opacity. Adding a subtle scale(0.97) on :active gives instant press feedback that makes the interface feel responsive.

Use ease-out for elements entering the screen, such as cubic-bezier(0.23, 1, 0.32, 1). Avoid ease-in, which delays initial movement and feels sluggish. For drawers, an iOS-like curve cubic-bezier(0.32, 0.72, 0, 1) works well.

Use springs for drag interactions with momentum, interruptible gestures, and elements that should feel alive, since springs maintain velocity when interrupted. Use CSS transitions for predetermined UI state changes that need to run off the main thread.

No. Framer Motion's shorthand x, y, and scale props run via requestAnimationFrame on the main thread and can drop frames under load. Use the full transform string, like transform: "translateX(100px)", for hardware acceleration.

Popovers are anchored to a trigger, so scaling from center looks disconnected. Set transform-origin to the trigger location, for example via var(--transform-origin). Modals are the exception and should stay centered.

Use the prefers-reduced-motion media query or a useReducedMotion hook to remove position and movement animations while keeping opacity and color transitions. Reduced motion means gentler animation, not zero animation.