Variants for Orchestrated Animations
Define named variant objects and propagate them through parent-child component trees.
What Are Variants?
Variants are named animation states defined as objects. Instead of inline values, components reference variant names like 'hidden' and 'visible'. Parent components can orchestrate children automatically.
Defining Variants
Create a variants object with named states. Pass it to the variants prop on a motion component.
const cardVariants = {
hidden: { opacity: 0, y: 30 },
visible: { opacity: 1, y: 0 },
};
<motion.div
variants={cardVariants}
initial="hidden"
animate="visible"
transition={{ duration: 0.4 }}
/>All lessons in this course
- Motion Components & Basic Animations
- Variants for Orchestrated Animations
- Gesture Animations: Hover, Tap & Drag
- Layout Animations & AnimatePresence