[React] 스크롤시 등장/퇴장 애니메이션 효과 적용해보기 (feat. framer motion & react-intersection-observer)

이번 포스트에서는 스크롤을 내려 특정 요소가 화면에 보일 때 자연스러운 애니메이션 효과가 날 수 있도록 구현해보도록 하겠습니다. 사용할 패키지는 애니메이션을 선언형으로 손쉽게, 그리고 직관적으로 구성할 수 있도록 해주는 framer-motion 그리고 특정 요소가 화면에 들어왔는지 감지할 수 있도록 해주는 react-intersection-observer 입니다. react-intersection-observer는 아래 포스트에서 무한 스크롤을 구현하기 위해 사용했던 intersection observer의 api를 react에서 훅 형태로 쉽게 관리하고 사용할 수 있도록 만든 패키지이기 때문에 그냥 직접 구현해서 사용해도 되지만 최대한 효율적이면서 손쉽게 구현하기 위해 사용해보도록 하겠습니다. [Fir..

2022.09.03