emil-design-eng

Use ease-out for elements entering the screen, ease-in-out for on-screen movement, and linear for constant motion like marquees. Avoid ease-in for UI since it delays initial movement and feels sluggish. Prefer custom cubic-bezier curves over built-in CSS easings for stronger, more intentional motion.

UI animations should stay under 300ms. Button press feedback works at 100-160ms, tooltips at 125-200ms, dropdowns at 150-250ms, and modals or drawers at 200-500ms. Faster animations make the interface feel more responsive even when actual speed is unchanged.

Use CSS transitions for dynamic, rapidly-triggered UI like toasts and toggles because they can be interrupted and retargeted mid-animation. Keyframes restart from zero when retriggered, causing visual jumps. Reserve keyframes for predetermined, non-interactive animations.

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) instead, 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. In React, use a useReducedMotion hook to conditionally disable positional movement.

Never animate keyboard-initiated actions or anything users trigger 100+ times per day, such as command palette toggles. Frequent animations make interfaces feel slow and disconnected. Raycast, for example, has no open or close animation because it is used hundreds of times daily.