emil-design-eng

Keep UI animations under 300ms and use ease-out curves so movement starts immediately. Add transform: scale(0.97) on :active for press feedback, and remove animation entirely from keyboard-initiated actions that repeat hundreds of times daily.

Use ease-out for elements entering the screen, since ease-in delays initial movement and feels sluggish. Prefer custom cubic-bezier curves like cubic-bezier(0.23, 1, 0.32, 1) over built-in CSS easings, which are too weak.

Use CSS transitions for dynamic, rapidly-triggered UI like toasts because they can be interrupted and retargeted mid-animation. Keyframes restart from zero on interruption, which causes visual jumps in interactive components.

Framer Motion's shorthand x, y, and scale props run on the main thread via requestAnimationFrame and are not hardware-accelerated. Use the full transform string like transform: translateX(100px), or switch to CSS animations which run off the main thread.

Use the prefers-reduced-motion media query to remove transform-based movement while keeping opacity and color transitions that aid comprehension. Reduced motion means fewer and gentler animations, not zero animation.

Use springs for drag interactions with momentum, interruptible gestures, and elements that should feel alive, since springs maintain velocity when interrupted. Avoid bounce in most UI contexts and keep it subtle (0.1-0.3) when used.