1. AOS 라이브러리 설치

---

npm install aos --save

• 타입스크립트 환경에서 사용할 경우 AOS 타입 정의 라이브러리를 별도로 설치해야 한다.

npm install @types/aos

2. import

• 라이브러리를 사용할 컴포넌트에서 AOS 파일들을 import 한다.

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

3. 초기화 및 적용

---

• 효과를 적용할 요소에 data-aos 속성을 정의해준다.

import { useEffect } from "react";
import AOS from "aos";
import "aos/dist/aos.css";

function Study() {
  useEffect(() => {
    AOS.init({
      duration: 900,
    });
  });

  return (
    // fade-up 효과 적용
    <StudyContainer data-aos='fade-up'>
    ...
    </StudyContainer>
  );
}

• 아래는 적용 가능한 속성 항목들이다.
  - data-aos : 사용할 애니메이션 효과명
  - data-aos-easing : 애니메이션 시간흐름에 따른 속도설정 옵션(default: ease)
  - data-aos-anchor : 특정한 객체에 anchor를 설정하여, 어떤 객체를 기준으로 애니메이션이 시작 될지를 설정
  - data-aos-delay : 애니메이션 지연 대기시간 설정(default: 0)
  - data-aos-offset : 애니메이션 효과가 시작될 객체의 위치 설정(default:120)
  - data-aos-duration : 애니메이션의 재생시간 설정(default: 400)
  - data-aos-anchor-placement : 애니메이션이 어느 위치에서부터 적용될지 설정(default: top-bottom)
  - data-aos-once : 스크롤 할때마다 애니매이션이 실행될 지(요소를 위/아래로 스크로) 설정(default: false)