[Portfolio] React | Aos를 사용하여 애니메이션 효과 주기

스크롤할 때 애니메이션 효과를 주고자한다! ( 스크롤 할 때 말고 다른 컴포넌트 마운트시에도 사용가능 )

💡Aos? (Animate On Scroll Library)
  - 스크롤 할 때 보여지는 영역에 애니메이션 효과를 넣을 수 있는 라이브러리
 - 어떤 애니메이션이 있는지는 https://michalsnik.github.io/aos/ 요기서 확인할 수 있음 :)

 

1️⃣ 설치

yarn add aos

 

 

2️⃣ 사용할 컴포넌트 혹은 index.js에 import !

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

AOS.init();

 

 

3️⃣ 애니메이션을 적용할 컴포넌트 (영역)

• data-aos="fade-up" : fade-out, zoom-in 등 다양하게 애니메이션 적용 가능!
• 어떤 애니메이션이 있는지는 https://michalsnik.github.io/aos/ 여기서 확인
• data-aos-duration="3000" : 3초 동안 실행

import React from 'react'
import styled from 'styled-components'

// ...생략

function Projects() {
    return (
        <Box data-aos="fade-up"  data-aos-duration="3000" />
    )
}

export default Projects

 

 

🎃 구현완료