[javascript] GSAP를 사용한 페이지 전환 애니메이션 예제

27 Nov 2023

javascript

GSAP(GreenSock Animation Platform)는 웹 애니메이션을 만들기 위한 강력한 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지 전환 애니메이션을 쉽게 만들 수 있습니다.

이 예제에서는 GSAP를 사용하여 웹 페이지 간의 전환 애니메이션을 구현해보겠습니다.

HTML 구조

먼저, 기본적인 HTML 구조를 준비합니다. 예제에서는 두 개의 웹 페이지를 전환하는 것을 가정합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Transition Animation Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="page page1">
    <h1>Welcome to Page 1</h1>
    <button class="transition-button">Go to Page 2</button>
  </div>
  
  <div class="page page2">
    <h1>Welcome to Page 2</h1>
    <button class="transition-button">Go to Page 1</button>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
  <script src="app.js"></script>
</body>
</html>

이 예제에서는 페이지 전환을 할 때, 페이지 요소들에 page 클래스를 추가하여 CSS 스타일링을 적용합니다. 또한, 페이지 전환 버튼에는 transition-button 클래스를 추가하여 이벤트 처리를 할 수 있도록 합니다.

CSS 스타일링

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s;
}

.page.active {
  opacity: 1;
  z-index: 1;
}

CSS 스타일링은 페이지 전환이 이루어질 때, 페이지 요소들의 투명도(opacity)를 조정하여 애니메이션 효과를 주는데 사용됩니다. active 클래스가 적용된 페이지는 불투명(opacity: 1)하게 나타나며, 다른 페이지들은 투명(opacity: 0)하게 되어 화면에서 사라집니다.

JavaScript

이제 GSAP를 사용하여 페이지 전환 애니메이션을 구현해보겠습니다. 먼저, app.js 파일을 생성하고 다음 코드를 추가합니다.

// 페이지 요소들 선택
const page1 = document.querySelector('.page1');
const page2 = document.querySelector('.page2');

// 페이지 전환 버튼들 선택
const button1 = document.querySelector('.page1 .transition-button');
const button2 = document.querySelector('.page2 .transition-button');

// 페이지 전환 함수
function transitionPages(fromPage, toPage) {
  gsap.to(fromPage, { opacity: 0, duration: 0.5, onComplete: function() {
    // fromPage의 투명도를 0으로 애니메이션 효과를 주고,
    // 애니메이션이 완료되면 실행되는 콜백 함수 내에서 다음 페이지를 나타내는 작업을 수행합니다.
    fromPage.classList.remove('active');
    toPage.classList.add('active');
    gsap.to(toPage, { opacity: 1, duration: 0.5 });
  }});
}

// 페이지 전환 이벤트 처리
button1.addEventListener('click', function() {
  transitionPages(page1, page2);
});

button2.addEventListener('click', function() {
  transitionPages(page2, page1);
});

transitionPages 함수는 GSAP의 gsap.to() 메서드를 사용하여 페이지 전환 애니메이션을 구현합니다. 이 함수는 전환되는 페이지 요소들에 active 클래스를 추가하거나 제거함으로써 화면에 보이게 하거나 사라지게 합니다.

결과

위의 HTML, CSS, JavaScript 코드를 사용하여 페이지 전환 애니메이션을 구현하면, 첫 번째 페이지와 두 번째 페이지 사이를 전환할 수 있습니다. 페이지 전환 버튼을 클릭하면 현재 페이지가 페이드 아웃되고, 다음 페이지가 페이드 인되는 애니메이션 효과를 볼 수 있습니다.

HTML 구조

CSS 스타일링

JavaScript

결과

참고 자료