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.
Installation
Usage
return (
<div className="flex gap-4 flex-wrap">
{ITEMS.map(({ bg }, index) => (
<motion.div
className={`${bg} size-16 rounded-md`}
key={`${index}-${animation}-${staggerDirection}-${staggerValue}`}
variants={animationVariants}
initial="hidden"
animate="visible"
transition={{
duration: 0.3,
ease: 'easeIn',
delay: setStaggerDirection({
direction: staggerDirection,
staggerValue: staggerValue,
totalItems: ITEMS.length,
index: index,
}),
}}
/>
))}
</div>
);Props
| Prop | Type | Default |
|---|---|---|
index? | number | 0.02 |
totalItems? | number | 0.02 |
staggerValue? | number | 0.02 |
direction? | start | middle | end | start |