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

useInview in framer motion react

Shirshak Kandel answered on October 3, 2022 Popularity 7/10 Helpfulness 10/10

answer useInview in framer motion react

useInview in framer motion react

Comment

import React, { useEffect, useRef } from 'react';
import { motion, useAnimation, useInView } from 'framer-motion';

const KeyFrameBox = () => {
  const ref = useRef(null);
  const isInView = useInView(ref);
  const control = useAnimation();

  useEffect(() => {
    if (isInView) {
      control.start({
        scale: [1, 1.2, 1.4, 1],
        borderRadius: ['20%', '20%', '50%', '50%', '20%'],
        rotate: [0, 0, 270, 270, 0],
      });
    }
  }, [isInView]);
  return (
    <div className="container mt-52">
      <motion.div ref={ref} animate={control} transition={{ duration: 2 }} className="w-32 h-32 bg-red-500"></motion.div>
    </div>
  );
};

export default KeyFrameBox;

Popularity 7/10 Helpfulness 10/10 Language typescript

Source: Grepper

Tags: framer-motion typescript