Framer-motion : useInview

useInView

특정 요소가 뷰포트 내에 있는지 여부를 감지하는 훅이다. 이 훅은 요소가 부포트 내에 있을 경우 true 를 반환하고 뷰포트 밖에 있을 경우 false를 반환한다.

❗ useInView를 사용하기 위해서는 useRef가 필수적이다.

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

function InViewComponent() {
    const ref = useRef(null);
    const isInView = useInView(ref);
    const [View, setView] = useState("")

    useEffect(() => {
        if (isInView) {
            setView("지금 엘리먼트가 보임")
        } else {
            setView("사라짐")
        }

    }, [isInView])

    return (
        <div>
            <div ref={ref} style={{
                height: '100px',
                backgroundColor: 'lightblue',
                margin: '1000px 0'
            }}>스크롤 하면 내가 보임!</div>
            <h1 style={{ position: "fixed", top: "50vh" }}>{View}</h1>
        </div>
    )
}
function Comp32() {

    return (

        <InViewComponent />

    )
}

export default Comp32

---

useInview 추가 속성

옵션	설명
root	기본적으로 useInView는 요소가 윈도우 뷰포트에 들어오고 나가는 것을 추적한다. root 옵션을 사용하여 스크롤 가능한 부모 요소의 ref를 설정하면, 해당 요소를 뷰포트로 사용한다.
margin	루트 요소 또는 윈도우 뷰포트에 적용할 하나 이상의 마진을 정의한다. 이 마진은 요소가 뷰포트 내에 있는 것으로 간주되는 지점을 확장하거나 축소할 수 있디. 마진은 px 또는 %로 정의한다.
once	once:true 로 설정하면 요소가 한 번 뷰포트 내에 들어오면 useInView는 해당 요소를 더 이상 관찰하지 않고 항상 true로 반환한다.
amount	요소의 어느 정도가 뷰포트에 들어와야 useInView가 true를 반환할지 정의한다. 0~1 사이의 숫자로 정의되며, 0은 요소의 일부 또는 전체, 1은 전체를 의미한다.

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

function Section({ children }) {
    const ref = useRef(null);
    const isInView = useInView(ref, { once: true });

    return (
        <section
            ref={ref}
            style={{
                boxSizing: "border-box",
                width: "100%",
                height: "101vh",
                display: "flex",
                justifyContent: "flex-start",
                overflow: "hidden",
                padding: "50px",
                background: "lightgreen",
                ...(children === "when" && { background: "lightpink" }),
                ...(children === "in" && { background: "lightblue" }),
                ...(children === "view!" && { background: "lightcoral" }),
            }}
        >
            <span
                style={{
                    display: "block",
                    transform: isInView ? "none" : "translateX(-200px)",
                    opacity: isInView ? 1 : 0,
                    transition: "all 0.9s cubic-bezier(0.17,0.55,0.55,1) 0.5s",
                    fontWeight: 700,
                    fontFamily: "Inter-Bold, Inter, sans-serif",
                    color: "rgba(0,0,0,0.9)",
                    fontSize: "64px",
                    letterSpacing: "-4px",
                }}
            >
                {children}
            </span>
        </section>
    );
}

export default function Comp33() {
    return (
        <>
            <Section>Animate</Section>
            <Section>when</Section>
            <Section>in</Section>
            <Section>view!</Section>
        </>
    );
}