Easing for System State Changes
System-initiated state changes should use easing curves.
Incorrect (spring for announcement):
<motion.div
animate={{ y: 0 }}
transition={{ type: "spring" }}
/>Correct (easing for announcement):
<motion.div
animate={{ y: 0 }}
transition={{ duration: 0.2, ease: "easeOut" }}
/>