Transitions
Enter/exit animations and layout changes. Essential for nodes appearing and disappearing in diagrams.
AnimatePresence
Animate elements when they're added or removed from the DOM. Click items to remove.
1
2
3
<AnimatePresence mode="popLayout">
{items.map(item => (
<motion.div
key={item}
layout
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.8 }}
>
{item}
</motion.div>
))}
</AnimatePresence>Layout Animations
Automatically animate between layout changes. Click to expand/collapse.
Expandable Card
<motion.div
layout
onClick={() => setExpanded(!expanded)}
style={{ borderRadius: 16 }}
>
<motion.h3 layout>Title</motion.h3>
<AnimatePresence>
{expanded && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
Expanded content
</motion.div>
)}
</AnimatePresence>
</motion.div>Shared Layout Transitions
Seamlessly animate between different layouts sharing the same layoutId.
🤖Agent
⚡Action
🪙Token
{selected === item.id && (
<motion.div
layoutId="selection"
className="absolute inset-0 bg-primary"
transition={{ type: "spring", stiffness: 500, damping: 30 }}
/>
)}Exit Animation Variants
Different exit patterns for different contexts.
👻
const variants = {
fade: { exit: { opacity: 0 } },
slide: { exit: { opacity: 0, x: 50 } },
scale: { exit: { opacity: 0, scale: 0 } },
flip: { exit: { opacity: 0, rotateY: 90 } },
}