Free React Scroll Animation Generator (Framer Motion) | Visual Builder | Jaconir Tools

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

// You can wrap any component with this to animate it on scroll.
// Just pass your component as a child.
const ScrollAnimatedComponent = ({ children }) => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true });

  const variants = {
  hidden: {
    opacity: 0,
    y: 75
  },
  visible: {
    opacity: 1,
    y: 0
  }
};

  const transition = {
    duration: 0.5,
    delay: 0,
    ease: "easeInOut"
  };

  return (
    <div ref={ref}>
        <motion.div
            variants={variants}
            initial="hidden"
            animate={isInView ? "visible" : "hidden"}
            transition={transition}
        >
            {children}
        </motion.div>
    </div>
  );
};

export default ScrollAnimatedComponent;