framer motion when in view

Njoroge Brian answered on August 4, 2022 Popularity 10/10 Helpfulness 4/10

answer framer motion when in view

framer motion when in view

Comment

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

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: framer-motion javascript react-intersection-observer view when

Link to this answer
Share Copy Link

Contributed on Aug 04 2022

Njoroge Brian

0 Answers Avg Quality 2/10

framer motion when in view

Contents

More Related Answers

framer motion when in view

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.