페이지 주소가 바뀌어도 자연스럽게 이어지는 애니메이션 만들기

SPA 페이지 전환 애니메이션 구현

• GatsbyJS를 사용하여 페이지 전환 시 자연스러운 애니메이션을 구현하는 방법을 설명합니다.
• History API를 활용하여 자바스크립트 실행 컨텍스트를 유지하고, 페이지 전환 애니메이션을 처리합니다.

레이아웃 및 애니메이션 설정

• gatsby-plugin-layout 플러그인을 사용하여 레이아웃 컴포넌트가 페이지 전환 시 언마운트되지 않도록 설정합니다.
• react-transition-group 라이브러리를 사용하여 페이지 전환 애니메이션을 구현하고, TransitionGroup 및 Transition 컴포넌트를 활용합니다.
• CSS를 통해 애니메이션 효과를 추가하고, 페이지의 전환 상태에 따라 opacity를 조절합니다.