[javascript] GSAP의 주요 기능과 기능 설명

27 Nov 2023

javascript

GSAP(GreenSock Animation Platform)은 JavaScript로 작성된 애니메이션 라이브러리로, 웹사이트나 앱에서 다양한 요소들의 애니메이션을 만들고 관리할 수 있는 강력한 기능을 제공합니다. 다음은 GSAP의 주요 기능과 기능 설명입니다.

Tweening (트윈)

GSAP의 가장 기본적인 기능 중 하나는 요소들의 트윈(애니메이션)을 만드는 것입니다. 트윈은 요소의 속성을 시작 값에서 목표 값까지 부드럽게 변화시키는 애니메이션입니다. 이를 통해 요소의 위치, 크기, 색상 등을 쉽게 제어할 수 있습니다. GSAP는 CSS 속성, SVG 속성 및 DOM 속성 모두를 트윈할 수 있도록 지원합니다.

// 예시 코드
gsap.to(".box", { duration: 1, x: 200, rotation: 360 });

위의 예시 코드는 box 클래스를 가진 요소의 x 좌표를 200으로 이동시키고, 1초 동안 360도 회전시키는 트윈을 생성합니다.

Timeline (타임라인)

GSAP에서는 여러 개의 트윈을 동기화하고 시간적인 제어를 위해 타임라인을 사용할 수 있습니다. 타임라인은 트윈을 그룹화하여 순차적으로 실행하거나 병렬로 실행하도록 설정할 수 있습니다. 또한, 트윈들의 시간을 조정하거나 일시 정지 및 재생과 같은 제어도 가능합니다.

// 예시 코드
var timeline = gsap.timeline();
timeline.to(".box1", { duration: 1, x: 200 })
  .to(".box2", { duration: 1, rotation: 360 }, "-=0.5")
  .to(".box3", { duration: 0.5, y: -100 }, "+=0.5")
  .to(".box4", { duration: 1, opacity: 0 }, { delay: 1, ease: "power2.in" });

위의 예시 코드는 box1을 x 좌표로 200 이동시키고, box2를 0.5초 지연시킨 후 1초 동안 360도 회전시키며, box3을 0.5초 지연시킨 후 0.5초 동안 y 좌표로 -100 이동시키고, 마지막으로 box4의 투명도를 1초 동안 0으로 조절합니다.

Easing (이징)

GSAP은 다양한 이징 함수를 제공하여 애니메이션의 움직임을 조절할 수 있습니다. 이징은 애니메이션의 시작과 끝 부분의 속도를 조절하여 자연스러운 움직임을 만들어줍니다. GSAP은 기본적으로 ease, ease-in, ease-out, ease-in-out 등 다양한 이징 함수를 지원합니다. 또한, Cubic Bezier, Elastic, Bounce 등 고급 이징 함수도 추가로 제공합니다.

// 예시 코드
gsap.to(".box", { duration: 1, x: 200, ease: "bounce.out" });

위의 예시 코드는 box 클래스를 가진 요소를 1초 동안 x 좌표로 200 이동시키면서, 바운스 이징 함수를 적용하여 자연스럽게 움직이도록 설정합니다.

ScrollTrigger (스크롤 트리거)

GSAP은 ScrollTrigger라는 플러그인을 제공하여 웹사이트에서 스크롤 이벤트를 트리거로 애니메이션을 동작할 수 있도록 지원합니다. 이를 통해 스크롤 위치, 스크롤 방향, 요소의 가시성 등을 기준으로 원하는 애니메이션을 트리거할 수 있습니다. ScrollTrigger를 사용하면 특정 위치에서 요소가 등장하거나 사라지는 등 다양한 효과를 부여할 수 있습니다.

// 예시 코드
gsap.registerPlugin(ScrollTrigger);

gsap.to(".box", {
  x: 200,
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    end: "bottom center",
    markers: true, // 테스트용 마커 표시
    toggleActions: "play reverse play reverse"
  }
});

위의 예시 코드는 box 클래스를 가진 요소를 x 좌표로 200 이동시키면서, 해당 요소가 스크롤 트리거로 사용되며, 화면의 상단 중앙에서 시작하여 하단 중앙에서 끝나도록 설정하고, 테스트용 마커를 표시하며, 스크롤 방향에 따라 애니메이션을 재생 및 역재생하도록 설정합니다.

위에서 설명한 기능은 GSAP의 주요 기능 중 일부입니다. GSAP은 세련된 애니메이션 효과를 구현할 수 있는 다양한 기능과 옵션을 제공하므로, 웹 개발에서 애니메이션을 사용하고자 할 때 유용하게 활용할 수 있습니다.

Tweening (트윈)

Timeline (타임라인)

Easing (이징)

ScrollTrigger (스크롤 트리거)

참고 자료