GSAP를 사용하여 프리젠테이션을 만들기 위해 먼저 HTML 구조를 설정해야 합니다. 각 슬라이드를 <div>로 감싸고, 슬라이드 사이에는 display: none으로 숨겨진 효과를 줍니다. 일반적으로 <div> 요소에는 CSS로 슬라이드의 초기 위치 및 스타일을 지정합니다.

<div class="slide" style="position: absolute; top: 0; left: 0;">
  <!-- Slide content here -->
</div>

GSAP를 사용하여 슬라이드를 애니메이션화하려면 먼저 GSAP 라이브러리를 프로젝트에 추가해야 합니다. 이후에 JavaScript 파일에서 GSAP의 TweenMax 클래스를 사용하여 애니메이션을 만들 수 있습니다. TweenMax 클래스는 요소의 시작 상태, 종료 상태 및 애니메이션 옵션을 인수로 받습니다.

// GSAP 라이브러리 가져오기
import { TweenMax } from "gsap";

// 슬라이드 요소 가져오기
const slide = document.querySelector(".slide");

// 슬라이드 애니메이션 설정
TweenMax.from(slide, 1, { x: -100, opacity: 0, ease: Power2.easeOut });

위의 예제에서는 x 속성을 사용하여 슬라이드를 왼쪽으로 이동시키고, opacity 속성을 사용하여 서서히 페이드 인되도록 설정했습니다. ease 속성은 애니메이션의 이징 유형을 지정합니다.

이제 슬라이드의 애니메이션을 트리거하는 이벤트 리스너를 추가할 수 있습니다. 예를 들어, 페이지 로드 시 애니메이션이 시작되도록 DOMContentLoaded 이벤트를 사용할 수 있습니다.

// 페이지 로드 시 애니메이션 시작
document.addEventListener("DOMContentLoaded", function() {
  TweenMax.from(slide, 1, { x: -100, opacity: 0, ease: Power2.easeOut });
});

GSAP를 사용하여 프리젠테이션 및 슬라이드 쇼 애니메이션을 만드는 방법에 대해 간단히 살펴보았습니다. GSAP는 다양한 애니메이션 옵션과 메서드를 제공하여 웹 사이트에 흥미로운 애니메이션 효과를 추가할 수 있습니다. GSAP 공식 문서에서 더 많은 정보와 예제를 찾을 수 있습니다.