[React/AOS] React에서 AOS(Animate On Scroll) 라이브러리 사용하기

 

디자이너에게 스크롤을 내리면 스르륵 나타나는 효과를 넣어달라는 요청을 받았다.

직접 구현하려다가 좋은 라이브러리를 찾아서 이렇게.

 

1. 사용하게 될 라이브러리

GitHub - michalsnik/aos: Animate on scroll library

 

2. npm/yarn의 경우에 맞춰 aos를 설치.

// yarn
yarn add aos
// npm
npm install aos --save

 

3. 가능한 최상단 컴포넌트에서 aos를 불러오기.

import AOS from "aos";
import "aos/dist/aos.css";

 

4. 그리고 aos를 부른 컴포넌트에서 useEffect를 사용하여 해당 기능을 실행.

useEffect(() => {
  AOS.init();
});

 

5. 자세한 내용은 홈페이지 참고(사용 예시 적혀있음)하여 사용하면 된다.

data-aos	사용할 애니메이션
data-aos-easing	애니메이션 속도 [default : ease]
data-aos-anchor	어떤 객체를 기준으로 애니메이션이 시작 될 것인지
data-aos-delay	애니메이션 대기시간 [default : 0]
data-aos-offset	애니메이션 효과가 시작되는 위치
data-aos-duration	애니메이션 재생시간 [default : 400]
data-aos-anchor-placement	애니메이션 적용 위치[default : top-bottom]
data-aos-once	스크롤 할 때마다 애니메이션 할지 [default : false]

AOS - Animate on scroll library