framer-motion

Wrap elements with motion components like motion.div and pass an animate prop describing the target state, plus a transition prop for duration and easing. Variants let you define named animation states for reusable orchestration.

Define a container variant with staggerChildren in its transition, then give each child motion element an item variant. When the container animates to its show state, children animate in sequence with the specified delay between each.

Yes, set transition type to spring and configure stiffness and damping values. Low damping creates overshoot effects useful for exaggeration, while higher damping produces controlled, natural-feeling motion.

Wrap conditional components in AnimatePresence and define an exit prop on the motion element. Framer Motion delays unmounting until the exit animation completes, enabling smooth removal transitions.

CSS transitions suffice for simple hover states and single-property changes. Framer Motion is better for orchestrated sequences, gesture-driven interactions, layout animations, and exit transitions that CSS cannot handle declaratively.