Variants are useful when we want to perform animations that propagate throughout the DOM.

Also useful when you want to control the animation state using React.useState()

Each variant is a animation target/state referred to by a label. <motion.div variants={variants} initial='hidden' whileInView='visible'/>

Can also define multiple variants via an array as in keyframes: animate={['visible', 'danger']}