CODE EXAMPLE FOR JAVASCRIPT

react-intersection-observer

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>
  )
  
}