Aos 설치방법

npm install --save aos@next

import AOS from 'aos';
import 'aos/dist/aos.css'; 
// You can also use <link> for styles
// ..
AOS.init();
return(
	<div>
 		안녕하세요
  	</div>
)

를 사용하면 할 수 있다.

Aos 애니메이션 사용 방법

/* 위쪽으로 페이드 효과 */
<div data-aos="fade-up"></div>

/* 아래쪽으로 페이드 효과 */
<div data-aos="fade-down"></div>

/* 오른쪽으로 페이드 효과 */
<div data-aos="fade-right"></div>

/* 왼쪽으로 페이드 효과 */
<div data-aos="fade-left"></div>

/* 왼쪽으로 플립 효과 */
<div data-aos="flip-left"></div>

/* 오른쪽으로 플립 효과 */
<div data-aos="flip-right"></div>

/* 위쪽으로 플립 효과 */
<div data-aos="flip-up"></div>

/* 아래쪽으로 플립 효과 */
<div data-aos="flip-down"></div>

/* 줌 효과 */
<div data-aos="zoom-in"></div>

자세한 내용은
깃허브 주소
여기를 통해서 알 수 있다.