Animation On Scroll (AOS): Library 활용

애플 공식 사이트, 토스 사이트처럼 스크롤을 내리면 다양한 애니메이션이 나오면서 구성요소가 튀어나오게 하고 싶었다.

스크롤을 내리면서 opacity를 설정해도 되는데, 좀 더 쉬운 방법이 없을까 찾아보다가 AOS 라이브러리를 찾았다.

 

https://michalsnik.github.io/aos/

AOS - Animate on scroll library

npm install aos --save

 

일단 npm install 하고, AOS를 쓰고 싶은 컴포넌트에서 아래와 같이 임포트 시킨다.

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

 

그리고 script에서 AOS를 init 시킨다. 나는 created() 시점에서 실행했다.

created() {
	AOS.init();
}

 

그 다음 template 부분에서 원하는 태크에 AOS 문법을 쓰면 된다.

# 예시
<div data-aos="zoom-in"></div>