Text Animatinon

A timeline animation using Framer Motion that animates items one by one as you reach each specific section

Why you need to start it?

There's no valid reason, I just need more star in my repo, please do it guys 😁

Follow me on X/Twitter?

There's no valid reason, I just need more follower, please do it guys😍

Installation

npm install framer-motion @motionone/utils
framer-timeline.tsx
import { motion, AnimatePresence, useInView } from 'framer-motion'
 
export const TimelineContent = ({
  children,
  animationNum,
  timelineRef,
}: {
  children: React.ReactNode
  animationNum: number
  timelineRef: React.RefObject<HTMLDivElement>
}) => {
  const sequenceVariants = {
    visible: (i: number) => ({
      filter: 'blur(0px)',
 
      y: 0,
      opacity: 1,
      transition: {
        delay: i * 0.3, // Delay each item by 0.5s multiplied by its index
        duration: 0.5, // Duration of the blur removal
      },
    }),
    hidden: {
      filter: 'blur(20px)',
      y: 0,
      opacity: 0,
    },
  }
  const isInView = useInView(timelineRef, {
    once: false,
    // margin: '0px 0px 400px 0px',
  })
  return (
    <>
      <>
        <motion.div
          initial="hidden"
          animate={isInView ? 'visible' : 'hidden'}
          custom={animationNum}
          variants={sequenceVariants}
        >
          {children}
        </motion.div>
      </>
    </>
  )
}

Props

PropTypeDefaultDescription
childrenReact.ReactNodeThe content to be displayed within the timeline.
animationNumnumberThe number of the animation sequence.
timelineRefReact.RefObject<HTMLDivElement> A reference to the timeline element for manipulation.
Video MaskingScroll Animation