Scroll Animation Generator

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

const ScrollAnimatedComponent = () => {
  const viewportRef = useRef(null);

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

  return (
    // Make sure the parent container is the scrollable element
    // and has a ref attached like this.
    <div ref={viewportRef} style={{ overflow: 'scroll', height: '300px' }}>
      <motion.div
        variants={variants}
        initial="hidden"
        whileInView="visible"
        viewport={{ once: true, root: viewportRef }}
        transition={{
          duration: 0.5,
          delay: 0,
          ease: "easeInOut"
        }}
        className="your-component-styles"
      >
        Animate Me!
      </motion.div>
    </div>
  );
};

export default ScrollAnimatedComponent;