[React] 스크롤에 따라 애니메이션 적용하기 (feat. Framer Motion)

서비스 홍보 페이지를 만들면서

스크롤에 따라서 화면에 특정 컴포넌트가 나타날 때, 위에서 자연스럽게 올라오는 애니메이션을 적용해보고싶어졌습니다.

 

라이브러리 선택

구글링을 해보니 react-reveal 과 framer motion 이라는 2가지 라이브러리를 찾을 수 있었는데,

react-reveal 은 마지막 업데이트가 오래되기도 했고

npm install 을 해보니 버전때문에 충돌이 나는 부분이 있어, framer motion 라이브러리를 선택했습니다.

 

framer motion 설치

npm install framer-motion

 

적용 방법

일단 제가 구현하려는 것은 다음과 같았습니다.

• 스크롤에 따라서 화면에 자식 컴포넌트가 나타나면, 자식컴포넌트에 애니메이션이 실행될 것.
• 스크롤을 올려서 자식컴포넌트가 보이지 않도록 했다가, 다시 보이도록 하면 애니메이션이 재실행될 것.
• 반투명 -> 불투명 상태로 변화하면서, 살짝 아래에서 위로 올라오는 애니메이션을 적용할 것.

먼저 자식 컴포넌트의 예제입니다.

import React from 'react';
import { motion } from 'framer-motion';

function AnimatedComponent() {
    return (
        <motion.div
            initial={{ opacity: 0, y: 50 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: false }}
            transition={{
                ease: "easeInOut",
                duration: 2,
                y: { duration: 1 },
            }}
        >
            <div>
                여기에 콘텐츠가 들어갑니다.
            </div>
        </motion.div>
    );
}

export default AnimatedComponent;

 

부모 컴포넌트의 예제입니다.

import React from 'react';
import AnimatedComponent from './AnimatedComponent';

function ParentComponent() {
    return (
        <div>
            <h1>부모 컴포넌트 제목</h1>
            <AnimatedComponent />
            {/* 여기에 필요한 경우 다른 컴포넌트들을 추가할 수 있습니다. */}
        </div>
    );
}

export default ParentComponent;

 

탐구

위 코드의 자식 컴포넌트에 적용된 framer motion 의 속성을 자세하게 정리하면 다음과 같습니다!

 

• initial 은 컴포넌트가 마운트될 때 초기 상태를 정의합니다
  • opacity 가 0 -> 처음 나타날 때에는 투명도가 0(아예 보이지 않음)
  • y 가 50 -> 처음 나타날 때에 Y 축 방향으로 50px 만큼 아래에 위치
• whileInView 는 컴포넌트가 viewport(사용자 화면 내)에 있을 때의 상태를 정의합니다
  • opacity 가 1 -> 컴포넌트가 화면에 나타나면 투명도가 1(완전히 보임)
  • y 가 0 -> 컴포넌트가 화면에 나타나면 Y 축 위치가 원래대로 (0) 돌아옴
• viewport 는 whileInView 가 어떻게 동작할지를 정의합니다.
  • once 가 false -> 컴포넌트가 화면에 들어올 때마다 whileInView 의 애니메이션이 재실행. 만약 true로 설정하게 되면 애니메이션이 최초 한번만 실행됨.
• transition 은 애니메이션 전환(initial 에서 whileInView 상태로)이 어떻게 진행될지 정의합니다.
  • ease 가 easeInOut -> 애니메이션 속도가 시작과 끝에서 서서히 변화
  • duration 이 2 -> 전체 애니메이션의 지속 시간이 2초
  • y 의 duration 이 1 -> Y축 방향으로 이동하는 애니메이션이 1초동안 진행됨.

적용한 프로젝트 예시

개발하고 있는 사이트에 적용해본 예시입니다!

 

---

framer motion 의 공식문서입니다.

여러 애니메이션이 있으니 살펴보시고 적절한 모션을 적용해보면 좋을 것 같아요!

https://www.framer.com/motion/

Documentation | Framer for Developers

감사합니다