Script – 23-28 Apr 7

import { useInView } from "react-intersection-observer";
import { motion, useAnimation } from "framer-motion";

const Component = () => {
    const animation = useAnimation();    
    const [ref, inView, entry] = useInView({ threshold: 0.1 });

    useEffect(() => {
      if (inView) {
        animation.start("visible");
      } else {
        animation.start("hidden");
      }
    }, [animation, inView]);

    const variants = {
        visible: {
          y: 0,
          opacity: 1,
          transition: { duration: 0.5, delayChilden: 0.2, staggerChildren: 0.1 },
        },
        hidden: {
          y: enter,
          opacity: 0,
        },
    }
    return (
<>
        <motion.div
          ref={ref}
          animate={animation}
          initial="hidden"
          variants={{variants}}>TITLE 1</motion.div>
//---------CONTENTS HERE
        <motion.div
          ref={ref}
          animate={animation}
          initial="hidden"
          variants={{variants}}>TITLE 2</motion.div>
//---------CONTENTS HERE
       <motion.div
        ref={ref}
        animate={animation}
        initial="hidden"
        variants={{variants}}>TITLE 3</motion.div>
</>
      );
}