Variants

variants gives you named animation states that can be reused across initial, animate, exit, and the while* props.

Props

• variants: Record<string, variant>. The variant map.
• initial: variant label | string[] | false. Initial variant state.
• animate: variant label | string[]. Active variant state.
• exit: variant label | string[]. Exit variant state.
• whileHover, whileTap, whileFocus, whileInView, whileDrag: variant label | string[].
• custom: unknown. Payload passed to variant functions.
• inherit: boolean. Set false to stop parent variant inheritance.

Variant Shape

• A variant can be a target object.
• A variant can be a function: (custom, current, velocity) => target object | variant label.
• Arrays such as animate={["visible", "selected"]} merge labels from left to right.
• Parent transitions can orchestrate children with when, delayChildren, staggerChildren, and staggerDirection.
• stagger(interval, { from }) returns a delay function for delayChildren.

Example

const item = {
  hidden: { opacity: 0, y: 12 },
  visible: { opacity: 1, y: 0 },
};

<motion.div variants={item} initial="hidden" animate="visible" />;