Scroll Animation Helper

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

export default function ScrollAnimatedComponent() {
  const ref = useRef(null);
  const isInView = useInView(ref, {
    once: true,
    amount: 0.3,
    
  });

  return (
    <motion.div
      ref={ref}
      initial={{"opacity":0,"transform":"translateY(50px)"}}
      animate={isInView ? {"opacity":1,"transform":"translateY(0)"} : {"opacity":0,"transform":"translateY(50px)"}}
      transition={{ duration: 0.6 }}
    >
      Your content here
    </motion.div>
  );
}

Animation Presets