Animate entrances, exits, and interactions with Motion (Framer Motion) — declare start and end states and let the library animate the difference.
Why: declare where an element starts and where it ends — Motion animates the difference. Gestures like hover and tap are one prop each. When: entrances, exits, layout changes, micro-interactions; reach for CSS transitions when a simple hover style is enough.
$ pnpm add motion'use client'
import { motion } from 'motion/react'
export default function Notification() {
return (
<motion.div
initial={{ opacity: 0, y: -16 }} // where it starts
animate={{ opacity: 1, y: 0 }} // where it ends — animated automatically
transition={{ duration: 0.3 }}
whileHover={{ scale: 1.03 }}
className="rounded-lg border p-4"
>
Saved successfully
</motion.div>
)
}