Framer-motion : Scroll-linked animations

Scroll Animation

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

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

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

Scroll-linked animations

1. useScroll Hook

useScroll은 페이지 스크롤을 추적한다.
❗ 사용 전 useScroll 을 Framer Motion에서 가져와야한다.

import { useScroll } from "framer-motion"

usescroll 은 다음 4개의 동작 값을 반환한다.
useScroll 혹은 scroll-linked animations 생성 시 자주 사용되며, 스크롤과 연동된 애니메이션을 쉽게 구현할 수 있게 한다. 스크롤 진행에 따라 애니메이션을 조정할 수 있는 다양한 정보를 제공한다.

기능	설명
scrollX / scrollY	페이지의 수평 및 수직 스크롤 위치를 픽셀 단위로 반환한다.
scrollXProgress / scrollYProgress	페이지의 수평 및 수직 스크롤 위치를 0과 1 사이의 값으로 반환한다. (시작 = 0, 끝 = 1 )

import { useScroll, motion } from 'framer-motion';

function ScrollLinkedComponent() {
    const { scrollYProgress } = useScroll();

    return (
        <motion.div
            style={{
                position:"fixed",
                top:0,
                left:0,
                right:0,
                height:"5px",
                backgroundColor:"lightcoral",
                transformOrigin:"0%", 
                scaleX : scrollYProgress
            }}
        />
    );
}

function Comp1() {
    return (
        <div style={{ position: "relative", height: "200vh" }}>
            <ScrollLinkedComponent />
            <div style={{padding:"20px"}}>
                <h1>스크롤해보세요</h1>
            </div>
        </div>
    );
}

export default Comp1;

2. useSpring

목표 값에 스프링 애니메이션을 적용할 수 있다.
useSpring은 수동으로 값을 설정하거나 다른 motion value를 전당하여 최신 값을 애니메이션할 수 있다.

useSpring( initialValue , config ) : 초기 값을 설정하고 스프링 애니메이션의 설정을 구성할 수 있다.

useSpring( motionValue , config ) : motion value 를 전달하여 해당 값이 변경될 때마다 스프링 애니메이션 설정을 구성할 수 있다.

useScroll Hook 추가 기능

기능	설명
Element scroll	특정 요소의 스크롤 위치를 추적할 수 있다. 이를 위해 useScroll의 container 옵션과 요소의 ref를 함꼐 사용한다
Element position	특정 요소의 진행 상황을 추적할 수 있다. 이를 위해 요소의 ref를 target 옵션에 전달한다

https://www.framer.com/motion/use-scroll/

위 홈페이지의 예제를 참고해 보기...