Timeline Animation

1"use client"
2 
3import type { Variants } from "motion/react"
4import {
5  type HTMLMotionProps,
6  motion,
7  useInView,
8  useReducedMotion,
9} from "motion/react"
10import type React from "react"
11 
12type TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {
13  children?: React.ReactNode
14  animationNum: number
15  className?: string
16  timelineRef: React.RefObject<HTMLElement | null>
17  as?: T
18  customVariants?: Variants
19  once?: boolean
20} & HTMLMotionProps<T>
21 
22export const TimelineAnimation = <
23  T extends keyof HTMLElementTagNameMap = "div",
24>({
25  children,
26  animationNum,
27  timelineRef,
28  className,
29  as,
30  customVariants,
31  once = true,
32  ...props
33}: TimelineContentProps<T>) => {
34  const reduce = useReducedMotion()
35 
36  const defaultSequenceVariants: Variants = {
37    visible: (i: number) => ({
38      y: 0,
39      opacity: 1,
40      transition: {
41        delay: reduce ? 0 : i * 0.5,
42        duration: reduce ? 0 : 0.5,
43      },
44    }),
45    hidden: {
46      y: reduce ? 0 : 8,
47      opacity: reduce ? 1 : 0,
48    },
49  }
50 
51  const sequenceVariants = customVariants || defaultSequenceVariants
52 
53  const isInView = useInView(timelineRef, {
54    once,
55  })
56 
57  const MotionComponent = motion[as || "div"] as React.ElementType
58 
59  return (
60    <MotionComponent
61      initial={reduce ? false : "hidden"}
62      animate={reduce || isInView ? "visible" : "hidden"}
63      custom={animationNum}
64      variants={sequenceVariants}
65      className={className}
66      {...props}
67    >
68      {children}
69    </MotionComponent>
70  )
71}