Start by installing react intersection observer

//npm i react-intersection-observer

​

import React, { useEffect } from "react";

import { useInView } from "react-intersection-observer"; //import {useInView} tells the dom when something is in viewport

import { motion, useAnimation } from "framer-motion"; //import {motion,useAnimation}

​

//I'm assuming you already know how to work with variants in framer motion

//create a variant for your animation

const nameVariant = {

  visible: { x: 50, y: 150, transition: { delay: 5, duration: 2 } },

  hidden: { x: 450, y: 250 },

};

​

const YOURCOMPONENT = () => {

  const control = useAnimation();

  const [ref, inView] = useInView();

  useEffect(() => {

    if (inView) {

      control.start("visible"); //when in view,start the visible animation variant

    } else {

      control.start("hidden"); //else its hidden

    }

  }, [control, inView]);

  return (

  <motion.div

         ref={ref}              //pass the ref to tell rio what is being checked

         variants={nameVariant} //pass in your variant

         initial="hidden"       //pass initial values

         animate={control}      //pass in control as it will be animated when element is in view

   className="title w-full relative flex">

     <h1>Hello my friend</h1>

    </motion.div>

  )

}