micro-interaction

Wrap conditionally rendered children in AnimatePresence from motion/react and give each child a stable key with initial, animate, and exit props. Use mode="popLayout" for lists so removed items do not hold space while exiting.

Assign the same layoutId to two elements in different components; Framer Motion animates between them as one mounts and the other unmounts. Watch for border-radius and text distortion during scale, and use layout="position" when only position should animate.

Yes, modern CSS supports this with transition-behavior: allow-discrete, which lets display flip at the end of an exit transition, combined with @starting-style to define enter-from values. It works in current Chrome, Edge, and Safari with a no-animation fallback for older browsers.

Keep micro-interactions in the 100-250ms range; anything over about 400ms feels laggy for click responses. Use ease-out like cubic-bezier(0.16, 1, 0.3, 1) for entrances, faster ease-in for exits, and springs around stiffness 400, damping 30 for snappy feedback.

In CSS, add a media query that reduces animation and transition durations; in Framer Motion, use useReducedMotion or wrap the app in MotionConfig with reducedMotion="user". Keep opacity feedback but drop large spatial movement rather than removing feedback entirely.

A plain layout element scales non-uniformly, which distorts border-radius and text during the animation. Add layout to direct children that should counter-scale, animate borderRadius as a motion value, or use layout="position" to animate position only.