Framer-motion : Scroll-triggered animations

Scroll Animation

스크롤과 연동된 애니메이션을 쉽게 구현할 수 있게 해준다.
스크롤 애니메이션은 크게 두가지 유형의 스크롤 애니메이션이 있다.

1. Scroll-linked animations : 스크롤 진행에 따라 애니메이션이 직접적으로 연동되는 방식. ex) 스크롤 진행에 따라 크기나 위치가 변경되는 애니메이션

2. Scroll-triggered animations : 요소가 뷰포트에 들어오거나 나갈 때 애니메이션이 트리거되는 방식. ex) 특정 섹션이 뷰포트에 들어올 때 요소가 나타나거나 사라지는 애니메이션

---

Scroll-triggered animations

Scroll-triggered animations 은 요소가 뷰포트에 들어오거나 나갈 때 시작되는 애니메이션이다.
Framer Motion 에서는whileInView prop을 사용하여 이러한 애니메이션을 만들 수 있다. 이 prop은 요소가 뷰포트에 있을 때 애니메이션할 속성과 선택적으로 전환을 정의한다.

Scroll-triggered animations 에서 제공하는 props

props	설명
whileInView	요소가 뷰포트에 있을 때 애니메이션 할 속성 또는 variant label을 정의한다.
viewport	뷰포트를 감지하는 방법을 정의하는 옵션 객체
onViewportEnter(entry)	요소가 뷰포트에 들어올 때 트리거되는 콜백이다.
onViewportLeave(entry)	요소가 뷰포트에서 나갈 때 트리거되는 콜백이다.

컨텐츠가 화면에 들어오면 애니메이션이 시작되는 예제

import {useRef} from 'react'

function Comp24(){
    const scrollRef = useRef(null)
        return(
            <div 
            ref={scrollRef}
                style={{overflow:"scroll", height:"400vh",paddingTop:"100vh"}}>
                <motion.div
                    initial={{opacity:0}}
                    whileInView={{opacity:1}}
                    transition={{duration:5}}> 
                    <h1 style={{
                    	textAlign:"center", 
                    	background:"linear-gradient(to bottom, #ff7e5f, #feb47b"}}>
                        스크롤 애니메이션 예제 1
                    </h1>
                </motion.div>
            </div>
        )
    
    }

Scroll-triggered animations viewport 옵션

option	설명
once	true로 설정하면 요소가 뷰포트에 한 번 들어오면 상태가 유지되고 추가 뷰포트 콜백이 트리거되지 않는다.
root	기본적으로 요소가 윈도우 뷰포트에 들어올 때 뷰포트 내에 있는 것으로 간주된다. 부모 요소를 뷰포트로 사용하려면 ref를 전달한다.
margin	뷰포트에 요소가 들어왔는지 감지할 때 추가할 마진이다. 기본값은 "0px"이다.
amount	기본값은 "some"이며, 요소가 뷰포트 내에 있는 것으로 간주되기 위해 교차해야 하는 요소의 양을 정의한다.

컨텐츠가 정해진 위치에 오면 실행되는 애니메이션 예제

마진을 -300px로 설정하여 컨텐츠가 y축 위로 300px 올라오는 순간 애니메이션이 진행되는 예제이다.

    function Comp24(){
        //어떠한 위치로 왔을떄 조건부 발동되게 할 수 있나??
        //컨텐츠 위치값을 정해서 애니메이션을 먹이기 힘들다
        //뷰포트를 조정해서 뷰포트 안에 들어가면 작동하게 만듦..

    
        const scrollRef = useRef(null)
            return(
                <div 
                ref={scrollRef}
                    style={{overflow:"scroll", height:"400vh",paddingTop:"100vh"}}>
                    <motion.div
                        initial={{opacity:0}}
                        whileInView={{opacity:1}}
                        transition={{duration:5}}
                        viewport={{root:scrollRef, once:true ,margin:"0px 0px -300px 0px"}} 
                        //안쪽으로 들어감.. ?? 뷰포트를 위로 올리겠다. 아래에서 250픽셀 위까지 
                        style={{background:"linear-gradient(to bottom, #ff7e5f, #feb47b",
                            height:"200vh"
                        }}>
                             <h1 style={{
                        textAlign:"center",paddingTop:"50vh",color:"#fff"}}>
                            스크롤 애니메이션 예제 1
                        </h1>
                    </motion.div>
                </div>
            )
        
        }