Use Animation Variants
A hook to create animation variants with Motion, animates the transforms(top, bottom, left, right, z), opacity, and blur.
Installation
Usage
const animationVariants = useAnimationVariants('blur');
<motion.div
variants={animationVariants}
transition={{ duration: 0.3, delay: 0.2, ease: 'easeInOut' }}
initial="hidden"
whileInView="visible"
viewport={{ once: true }}
className="text-4xl tracking-tight font-bold"
>
<h2>Animation variants demo</h2>
</motion.div>;Props
| Prop | Type | Default |
|---|---|---|
animation? | left | right | top | bottom | z | blur | undefined; | opacity |