페이지 4: Easing, 플러그인 및 고급 기능

4. Easing, 플러그인 및 고급 기능

Easing은 애니메이션의 속도 변화를 제어하여 움직임을 자연스럽고 매력적으로 만듭니다. 플러그인은 GSAP의 기능을 확장합니다.

4.1. Easing 옵션 사용

GSAP는 다양한 Easing 타입을 제공합니다 (예: Power1, Sine, Back, Elastic). Easing을 사용하면 움직임에 물리적인 느낌을 줄 수 있습니다.

gsap.to(".bounce-box", { 
  duration: 1.5, 
  y: 200, 
  ease: "bounce.out" // 바운스 아웃 효과
});
gsap.to(".elastic-item", { 
  duration: 2, 
  rotation: 360, 
  ease: "elastic.out(1, 0.3)" // 탄성 아웃 효과
});

4.2. ScrollTrigger 플러그인 (예시)

ScrollTrigger는 스크롤 위치에 따라 애니메이션을 트리거하거나 제어하는 데 사용되는 가장 인기 있는 플러그인입니다. 사용하려면 별도로 포함해야 합니다.

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/ScrollTrigger.min.js"></script>
// ...
gsap.to(".header", {
  y: -100, // 헤더를 위로 숨김
  scrollTrigger: {
    trigger: "body",
    start: "top top", // 스크롤이 맨 위에 도달했을 때
    scrub: 0.5 // 스크롤에 애니메이션을 부드럽게 연결
  }
});