Animation Variants
Object of variant animations with Motion, animates the transforms(top, bottom, left, right, z), opacity, and blur.
updated, added rotation animations.
AnimationT and ANIMATION_VARIANTS are deprecated use
animation_variants and AnimationVariantsT instead.
Loading...
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 | opacity | rotateX | rotateY | rotateZ | opacity |