Stagger Animations
Animated Block with orchestrated stagger animations, for your motion components, the animations are triggered by view.
Your animated & reusuble
blocks for your designs
Crafting exceptional digital experiences through innovative design solutions.
From concept to creation, we transform your vision into reality.
Installation
Usage
<ContainerStagger className="flex flex-col text-center items-center space-y-5 p-6">
<motion.h1
className="font-serif text-5xl font-extralight"
variants={animationVariants}
>
Your{' '}
<span className=" font-serif font-extralight text-primary">
animated & reusuble
</span>{' '}
<br />
blocks for your designs
</motion.h1>
<motion.p
variants={animationVariants}
className="leading-normal tracking-tight text-muted-foreground"
>
Crafting exceptional digital experiences through innovative design
solutions.
<br /> From concept to creation, we transform your vision into reality.
</motion.p>
<MotionButton size="sm" variants={animationVariants}>
Book free call <VideoIcon className="size-4 " />
</MotionButton>
</ContainerStagger>
Examples
Props
Prop | Type | Default |
---|---|---|
staggerChildren? | number | 0.2 |
delayChildren? | number | 0.2 |
Lazy Load / Infinite Scroll Container
Infinite scroll container for optimizing the loading of large data sets, with a customizable threshold and a configurable loading indicator.
Rotated Gallery On Scroll
Animated gallery images, with scroll triggered animations, rotates and translates on the Y axis on scroll.