리액트 스크롤에 따른 애니메이션 구현 (feat. framer-motion)

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

const Reveal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const ref = useRef<HTMLDivElement | null>(null);
  const isInView = useInView(ref, { once: true });
  const mainControls = useAnimation();

  
  useEffect(() => {
    // If the element is in the view, animate it.
    if (isInView) {
      mainControls.start("visible");
    }
  }, [isInView, mainControls]);

  return (
    <div ref={(el) => (ref.current = el)}>
      <motion.div
        animate={mainControls}
        variants={{
          hidden: { opacity: 0, y: 75 },
          visible: { opacity: 1, y: 0 },
        }}
        initial="hidden"
        transition={{ duration: 0.5, delay: 0.25 }}
      >
        {children}
      </motion.div>
    </div>
  );
};

export default Reveal;

framer-motion 을 사용하면 useInView hook을 이용하여 아주 간단하게 스크롤에 따른 애니메이션 구현이 가능하다.