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>;

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

PropTypeDefaultDescription
childrenReact.ReactNode—The content to be displayed within the timeline.
askeyof HTMLElementTagNameMap"div"The HTML element to render (div, a, section, etc.).
animationNumnumber—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.
customVariantsVariants—Optional set of custom Framer Motion variants for hidden and visible animations.
classNamestring—Optional CSS classes to style the timeline element.
delayboolean—Optional delay properties for adding delay animation between timeline.
...propsComponentPropsWithoutRef<T>—All other native HTML props for the element (e.g., href, target, rel for <a>).
Drag ItemsScroll Animation