Framer-motion을 통해서 컴포넌트에 등장 애니메이션 적용한 저번 포스트에 이어서 이번 포스트에서는 페이지 이동시 자연스럽게 전환되도록 애니메이션 효과를 적용해보도록 하겠습니다. react-transition-group 같은 패키지를 사용해도 무방하지만 저번 포스트에서 framer-motion으로 진행했기 때문에 같은 라이브러리를 사용해서 진행해 보겠습니다. 우선 framer-motion이 설치되있지 않은 분들은 아래 명령어를 통해 설치해주시길 바랍니다. npm i framer-motion // 또는 yarn Animate Presence 로 애니메이션 적용하기 페이지간의 자연스러운 이동을 위해서는 Framer에서 제공하는 AnimatePresence라는 컴포넌트를 사용해야합니다. 해당 컴포넌트를..

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