Clip Path Animation Variants

Object to animate with clip path reveal for Motion.

Open in 21st dev
Loading...

Installation

Usage

const clipPathVariants = clip_path_animation_variants['curtain-down'];
<motion.div
  variants={clipPathVariants}
  transition={{ duration: 0.3, delay: 0.2, ease: 'easeInOut' }}
  initial="hidden"
  whileInView="visible"
  viewport={{ once: true }}
/>;

Props

PropTypeDefault
animation
curtain-down | curtain-up | curtain-center-vertical | curtain-center-horizontal
-

Animation Variants updated

Object of variant animations with Motion, animates the transforms(top, bottom, left, right, z), opacity, and blur.

Stagger Direction

Set stagger direction, Allow to animate in orchestrated order depending on the order, can animate from the start item, middle item, last item.