Framer motion : useInView 에 대해서

useInView는 Framer Motion에서 제공하는 훅으로, 특정 요소가 뷰포트(viewport)에 들어왔는지 감지하여 스크롤 이벤트에 따라 애니메이션 효과를 적용할 수 있다. 

• const ref = useRef(null) ; // 이후 뷰포트의 기준이 되는 요소에 ref를 지정한다. 
• const 변수명 = useInView(ref, {useInView 추가 속성 설정});

 

useInView 추가 속성

속성	설명
root	뷰포트의 기준이 되는 요소를 지정한다.
margin	뷰포트에 들어오기 전에 얼마만큼의 여유를 두고 애니메이션이 시작될지를 지정한다. 마진은 px 또는 %로 정의한다.
once	애니메이션이 한 번만 실행되도록 설정하는 데 사용된다.
amount	크롤 위치에 따른 애니메이션의 비율을 지정하는 데 사용한다.

 

useInView 사용하기 

1. useRef를 사용하여 뷰포트의 기준 요소에 대한 참조를 생성한 후 useInView를 정의한다. 

    const ref = useRef(null);
    const isInView = useInView(ref, {
        margin: "-30%", // 뷰포트의 경계가 -30% 떨어져있다는 의미
        once: false // 스크롤할 때마다 애니메이션이 실행
    });

 

2. HTML 요소에 ref를 적용한다. 

isInView, 즉 뷰포트에 들어오면 애니메이션이 시행되도록 한다. 

        <div className={styles.container}>
            <div style={{ height: "100vh" }}>스크롤을 내려주세요.</div>
            {/* 뷰포트 기준 설정 */}
            <div ref={ref}>
                <motion.div
                    initial={{ opacity: 0, scale: 0.9 }} // 초기 상태  
                    //뷰포트에 들어왔을때 (isInView) 애니메이션 설정한다. 
                    animate={{ opacity: isInView ? 1 : 0, scale: isInView ? 1 : 0.9 }} // 애니메이션 상태
                    transition={{ duration: 0.5 }}>
                    <h2>코딩쥐의 티스토리입니다.</h2>
                </motion.div>
            </div>
            <div style={{ height: "100vh" }}/>
        </div>

 

<<전체 코드>>

import { useRef } from "react";
import { useInView, motion } from "framer-motion";
import styles from "./Comp01.module.css";

const Comp01 = () => {
    // 뷰포트 기준 요소 
    const ref = useRef(null);
    // useInView 정의
    const isInView = useInView(ref, {
        margin: "-30%", // 뷰포트의 경계가 -30% 떨어져있다는 의미
        once: false // 스크롤할 때마다 애니메이션이 실행
    });

    return (
        <div className={styles.container}>
            <div style={{ height: "100vh" }}>스크롤을 내려주세요.</div>
            {/* 뷰포트 기준 설정 */}
            <div ref={ref}>
                <motion.div
                    initial={{ opacity: 0, scale: 0.9 }} // 초기 상태  
                    //뷰포트에 들어왔을때 (isInView) 애니메이션 설정한다. 
                    animate={{ opacity: isInView ? 1 : 0, scale: isInView ? 1 : 0.9 }} // 애니메이션 상태
                    transition={{ duration: 0.5 }}>
                    <h2>코딩쥐의 티스토리입니다.</h2>
                </motion.div>
            </div>
            <div style={{ height: "100vh" }}/>
        </div>
    );
}

export default Comp01;