Parcel은 매우 간편하고 강력한 웹 애플리케이션 번들러입니다. 페이지 전환 애니메이션을 추가하는 방법은 다음과 같습니다.

1. GSAP 설치: GSAP(GreenSock Animation Platform)은 강력한 JavaScript 애니메이션 라이브러리입니다. Parcel 프로젝트에 GSAP을 추가하기 위해 터미널에서 다음 명령을 실행하세요.

   npm install gsap
   

2. 애니메이션 CSS 작성: 애니메이션을 위한 CSS를 작성합니다. 예를 들어, 페이지 전환 시 화면이 서서히 사라지는 페이드 아웃 효과를 추가하려면 다음과 같은 CSS를 작성할 수 있습니다.

   .fade-out {
     opacity: 0;
     transition: opacity 0.3s;
   }
   

3. 페이지 전환 스크립트 작성: 페이지 전환이 발생할 때 애니메이션을 트리거하는 JavaScript 스크립트를 작성합니다. 이를 위해 window.location.href를 사용하여 페이지를 새로고침하고, 페이지가 새로 로드될 때 애니메이션을 적용합니다.

   import { TweenMax } from "gsap";
   
   function navigateTo(url) {
     // 페이지 전환 애니메이션 적용
     TweenMax.to(".page-container", 0.3, {
       className: "fade-out",
       onComplete: () => {
         window.location.href = url;
       }
     });
   }
   
   // 페이지 전환 버튼 클릭 시 navigateTo 함수 호출
   document.querySelector("#page-transition-button").addEventListener("click", () => {
     navigateTo("새로운 페이지 URL");
   });
   

4. HTML 마크업 수정: 페이지 전환이 발생하는 요소에 애니메이션을 적용하기 위해 HTML 마크업을 수정합니다. 예를 들어, 페이지 전환 버튼을 추가하려면 다음과 같이 작성합니다.

   <button id="page-transition-button">페이지 전환</button>
   <div class="page-container">
     <!-- 페이지 컨텐츠 -->
   </div>
   

위의 단계를 따라하면 Parcel 프로젝트에 페이지 전환 애니메이션을 추가할 수 있습니다. GSAP을 사용하여 다양한 애니메이션 효과를 만들 수 있다는 점을 기억하세요.