react에서 AOS 패키지 사용하기 - AOS not working....

 

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

AOS - Animate on scroll library

 

aos 패키지란 스크롤 애니메이션을 손쉽게 만들 수 있게 해주는 라이브러리다.

react에서 적용해보려고 했는데 계속 적용이 안되길래 

https://blog.devgenius.io/how-to-add-scrolling-animations-to-reactjs-by-using-aos-cefa020a1604

How to add scrolling animations to ReactJS by using AOS

이 블로그를 보고 그대로 따라했더니 해결됐다!

만쉐잉

 

STEP 1. AOS install

npm install --save aos@next

또는

yarn add aos@next

STEP 2. 컴포넌트에 import 하기

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

STEP 3. initialize

이걸 몰라서 계속 해맸다.

index.html에 추가하고 했는데도 안되길래 어떻게 하는거지 했는데,

사용하고자 하는 컴포넌트에다가

useEffect(() => {
        AOS.init();
      }, [])

요롷게 넣어주면 된닷!

 

최종 코드

import React,{useEffect} from "react";
// importing aos
import AOS from 'aos';
import 'aos/dist/aos.css';

export default function MyFunctionalComponent() {
    useEffect(() => {
        AOS.init();
      }, [])
  return (
    <div>
      MyFunctionalComponent
    </div>
  );
}

화면에 적용한 모습

나와는 다른 이유로 AOS가 먹히지 않는다면 아래의 링크에서 해결책을 찾을 수 있을지도 모른다.

https://github.com/michalsnik/aos/issues/336

AOS NOT Working · Issue #336 · michalsnik/aos