emil-design-eng

Use ease-out curves instead of ease-in, keep UI animations under 300ms, and specify exact properties instead of transition: all. Custom cubic-bezier curves like cubic-bezier(0.23, 1, 0.32, 1) feel stronger than built-in easings.

Check for transition: all, scale(0) entry animations, ease-in on UI elements, durations over 300ms, and keyframes on rapidly triggered elements. Each issue has a concrete fix, such as starting from scale(0.95) with opacity 0 and using interruptible CSS transitions.

Use CSS transitions for predetermined animations since they run off the main thread and stay smooth under load. Use Framer Motion springs for interruptible gestures, but note that x and y shorthand props are not hardware-accelerated; use the full transform string instead.

The default transform-origin: center makes popovers scale from the middle instead of their trigger. Set transform-origin to the trigger location, for example var(--radix-popover-content-transform-origin) in Radix UI. Modals are the exception and should stay centered.

Skip animation for actions repeated hundreds of times daily, such as keyboard shortcuts and command palettes, since animation makes them feel slow. Also avoid animating anything whose only purpose is looking cool when users see it frequently.

Reduced motion means fewer and gentler animations, not zero. Keep opacity and color transitions that aid comprehension, but remove transform-based movement. Use the prefers-reduced-motion media query in CSS or useReducedMotion in Framer Motion.