Variants

Variants are the simplest way to reuse animations. Take this for an example

<motion.div
  initial={{
    opacity: 0,
    filter: "blur(10px)",
    scale: 0.95,
  }}
  animate={{
    opacity: 1,
    filter: "blur(0px)",
    scale: 1,
  }}
  exit={{
    opacity: 0,
    filter: "blur(10px)",
    scale: 0.95,
  }}
  className="size-20 flex items-center justify-center"
/>

With variants, we can define states like open and close OR you can literally name them anything, as long as you hook up with initial and animate.

Lets take an example to understand it better

Notice how we have our root variants called navVariants and we define our root keys there like open and closed.

These are also propogated to the children components. If you just pass in the navVariants and do NOT pass keys separately, it will use the same keys as the parent.

However, if you want to override the keys for the children, you can pass them separately.

There's also a delayChildren property with stagger. That is used to delay children items animations with a stagger, one-after-the-other effect.

Staggering is particularly useful when you have to create animations which you want to reveal gradually. In the coming lessons, we will see more such examples.