Text Animatinon

1
import { motion, AnimatePresence, useInView } from 'framer-motion';
2

3
export const TimelineContent = ({
4
  children,
5
  animationNum,
6
  timelineRef,
7
}: {
8
  children: React.ReactNode;
9
  animationNum: number;
10
  timelineRef: React.RefObject<HTMLDivElement>;
11
}) => {
12
  const sequenceVariants = {
13
    visible: (i: number) => ({
14
      filter: 'blur(0px)',
15

16
      y: 0,
17
      opacity: 1,
18
      transition: {
19
        delay: i * 0.3, // Delay each item by 0.5s multiplied by its index
20
        duration: 0.5, // Duration of the blur removal
21
      },
22
    }),
23
    hidden: {
24
      filter: 'blur(20px)',
25
      y: 0,
26
      opacity: 0,
27
    },
28
  };
29
  const isInView = useInView(timelineRef, {
30
    once: false,
31
    // margin: '0px 0px 400px 0px',
32
  });
33
  return (
34
    <>
35
      <>
36
        <motion.div
37
          initial='hidden'
38
          animate={isInView ? 'visible' : 'hidden'}
39
          custom={animationNum}
40
          variants={sequenceVariants}
41
        >
42
          {children}
43
        </motion.div>
44
      </>
45
    </>
46
  );
47
};