Framer Motion: Animations That Actually Feel Good

Springs versus tweens

Springs feel alive on draggable panels and micro-interactions; tweens feel precise for choreographed page entrances. I default to springs for user-driven motion and short tweens for scroll-linked or sequenced reveals. Mixing both in one component without reason usually reads as inconsistent.

Layout animations

layout and layoutId in Framer Motion solve shared-element transitions when the DOM structure changes — expanding cards, reordering lists. The trick is keeping dimensions stable enough that the browser can interpolate; avoid animating layout on elements whose size depends on async content without a min-height skeleton.

Gestures

Hover and tap states should respect pointer modality. I keep press feedback subtle on desktop and slightly larger on touch. Drag gestures get clear bounds and resistance at edges so users understand limits without reading docs.

AnimatePresence and exits

Lists and modals need exit animations as much as entrances. Wrapping conditional trees in AnimatePresence with stable key values prevents flashes. I use mode="wait" when swapping mutually exclusive views so outgoing content finishes before incoming mounts.

Reduced motion

I read prefers-reduced-motion at the provider level and swap spring configs for short opacity fades or disable non-essential motion entirely. It is a requirement for professional sites, not an enhancement.

Summary

Animation should reinforce hierarchy and feedback, not decorate for its own sake. Consistent timing, respectful motion settings, and deliberate use of layout animations are what separate polish from noise in production.