emil-design-eng

Use ease-out curves so movement starts immediately, keep UI animations under 300ms, and add transform: scale(0.97) on :active for press feedback. Avoid ease-in, which delays initial movement and feels sluggish.

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.

Use CSS transitions for rapidly triggered, interruptible UI like toasts and toggles because they retarget smoothly mid-animation. Keyframes restart from zero on interruption, causing visible jumps.

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.

Never animate keyboard-initiated actions or elements seen 100+ times daily, such as command palettes. Frequent animations make interfaces feel slow; remove or drastically reduce them for high-frequency interactions.

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