A React component intended to be used to execute sequential animations using Tailwind utility classes.
npm install @rendr-view/staggerA React component intended to be used to execute sequential animations using Tailwind utility classes.
``sh`
yarn add @rendr-view/stagger
`tsx
step={[
{ id: "title", in: 700, out: 700 },
{ id: "text", in: 700 },
{ id: "world", in: 2000 }
]}
>
{steps => (
"bg-slate-900 text-white max-w-screen-md px-6 py-12 transform transition duration-700 overflow-hidden",
{
["-translate-x-full"]: !steps.started
}
)}
>
"translate-y-32 opacity-0": steps.unready("title")
})}
>
Hello...{" "}
"opacity-0": steps.unready("world")
})}
>
world!
"opacity-0": steps.unready("text")
})}
>
Incididunt nulla incididunt qui occaecat mollit ut proident.
Ad consectetur ad qui ad culpa consequat. Pariatur veniam
consequat et amet duis quis exercitation officia eu sint
Lorem.
)}