Breaking News: Grepper is joining You.com. Read the official announcement!

React scroll animations with Framer Motion

Exuberant Eland answered on April 8, 2023 Popularity 8/10 Helpfulness 2/10

answer React scroll animations with Framer Motion

React scroll animations with Framer Motion

Comment

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

const boxVariant = {
  visible: { opacity: 1, scale: 1, transition: { duration: 0.5 } },
  hidden: { opacity: 0, scale: 0 }
};

const Box = ({ num }) => {

  const control = useAnimation();
  const [ref, inView] = useInView();

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

  return (
    <motion.div
      className="box"
      ref={ref}
      variants={boxVariant}
      initial="hidden"
      animate={control}
    >
      <h1>Box {num} </h1>
    </motion.div>
  );
};

export default function App() {
  return (
    <div className="App">
      <Box num={1} />
      <Box num={2} />
      <Box num={3} />
    </div>
  );
}

Popularity 8/10 Helpfulness 2/10 Language javascript

Source: blog.logrocket.com

Tags: framer-motion javascript react-scroll

Link to this answer
Share Copy Link

Contributed on Apr 08 2023

Exuberant Eland

0 Answers Avg Quality 2/10

React scroll animations with Framer Motion

Contents

More Related Answers

React scroll animations with Framer Motion

Grepper

Documentation

Social

Legal

Contact

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