Timeline Animation
A timeline animation built with Framer Motion that animates sections one after another as they enter the viewport. Supports an animationNum prop to control when each item in the timeline animates.
Installation
npx uilayouts@latest add timeline-animation
Usage Examples
Default Animation
const timelineRef = useRef<HTMLDivElement>(null);
<TimelineAnimation as='h2' animationNum={1} ref={timelineRef}>
Default fade/slide animation
</TimelineAnimation>
Custom Variants
const timelineRef = useRef<HTMLDivElement>(null);
const revealVariants = {
hidden: { opacity: 0, scale: 0.8 },
visible: { opacity: 1, scale: 1, transition: { duration: 0.5 } },
};
<TimelineAnimation as='button' ref={timelineRef} animationNum={2} customVariants={revealVariants}>
Custom animation
</TimelineAnimation>;
Using <a> Link
const timelineRef = useRef<HTMLDivElement>(null);
<TimelineAnimation
as='a'
href='https://pro.ui-layouts.com/test'
animationNum={3}
customVariants={revealVariants}
ref={timelineRef}
className='group rounded-lg border p-4'
>
Clickable card
</TimelineAnimation>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | — | The content to be displayed within the timeline. |
| as | keyof HTMLElementTagNameMap | "div" | The HTML element to render (div, a, section, etc.). |
| animationNum | number | — | A number used to stagger animations for multiple items. |
| viewport | { amount?: number; margin?: string; once?: boolean } | { amount: 0.3, margin: "0px 0px -120px 0px", once: true } | Controls when the animation triggers in the viewport. |
| customVariants | Variants | — | Optional set of custom Framer Motion variants for hidden and visible animations. |
| className | string | — | Optional CSS classes to style the timeline element. |
| delay | boolean | — | Optional delay properties for adding delay animation between timeline. |
| ...props | ComponentPropsWithoutRef<T> | — | All other native HTML props for the element (e.g., href, target, rel for <a>). |