emil-design-eng

Use ease-out curves so movement starts immediately, keep durations under 300ms, and add a subtle scale(0.97) press state on buttons. Custom cubic-bezier curves like cubic-bezier(0.23, 1, 0.32, 1) feel stronger than built-in CSS easings.

Use ease-out for elements entering the screen and ease-in-out for elements moving on screen. Never use ease-in for UI, since its slow start makes interfaces feel sluggish. Keep dropdowns at 150-250ms and modals at 200-500ms.

Use CSS transitions for dynamic, rapidly triggered UI because they can be interrupted and retargeted mid-animation. Keyframes restart from zero on interruption, which causes visible jumps when toasts or toggles fire repeatedly.

No. Framer Motion's shorthand x, y, and scale props run on the main thread via requestAnimationFrame. For hardware acceleration, animate the full transform string such as transform: translateX(100px), or use CSS animations under heavy load.

Skip animation for actions repeated hundreds of times daily, such as keyboard shortcuts and command palettes, since animation makes them feel delayed. Reduce or remove animation for elements seen tens of times per day like hover effects.

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.