[javascript] GSAP에서 사용되는 주요 개념 및 용어

27 Nov 2023

javascript

GSAP( GreenSock Animation Platform)은 JavaScript로 작성된 강력한 애니메이션 라이브러리입니다. GSAP은 다양한 개념과 용어를 제공하여 애니메이션 개발을 더 쉽고 효율적으로 만듭니다. 아래는 GSAP에서 주로 사용되는 몇 가지 주요 개념과 용어에 대한 설명입니다.

1. 트윈(Tween)

트윈은 GSAP에서 가장 중요한 개념 중 하나입니다. 트윈은 시작과 끝의 상태를 지정하여 원하는 애니메이션을 생성하는 메서드입니다. 예를 들어, 요소의 위치를 이동하거나 크기를 조절하는 트윈을 만들 수 있습니다.

gsap.to(element, { duration: 1, x: 100, y: 200, scale: 2 });

위의 코드는 element라는 요소를 1초 동안 x축으로 100픽셀, y축으로 200픽셀 이동하고, 크기를 2배로 조절하는 애니메이션을 만듭니다.

2. 이징(Easing)

이징은 애니메이션의 움직임을 조절하는 방법입니다. GSAP은 다양한 이징 함수를 제공하여 애니메이션을 부드럽게 하거나 더욱 강조할 수 있습니다.

gsap.to(element, { duration: 1, x: 100, ease: "easeInOut" });

위의 코드에서 ease 속성은 “easeInOut”이라는 이징 함수를 사용하여 애니메이션을 보다 부드럽게 만듭니다.

3. 시퀀스(Sequence)

시퀀스는 여러 개의 트윈을 순차적으로 실행하는 방법입니다. 한 번에 여러 개의 트윈을 만들고 여러 개의 트윈을 순서대로 실행할 수 있습니다.

gsap.sequence([
  gsap.to(element1, { duration: 1, x: 100 }),
  gsap.to(element2, { duration: 0.5, y: 200 })
]);

위의 코드에서는 element1에 대한 이동 애니메이션을 1초 동안 실행한 후, element2에 대한 이동 애니메이션을 0.5초 동안 실행합니다.

4. 플러그인(Plugin)

GSAP은 다양한 플러그인을 제공하여 더 많은 기능을 추가할 수 있습니다. 예를 들어, ScrollTrigger 플러그인을 사용하여 스크롤 이벤트에 따른 애니메이션을 만들 수 있습니다.

gsap.to(element, {
  scrollTrigger: {
    trigger: element,
    start: "top center",
    end: "bottom center",
    toggleActions: "play none none reverse"
  },
  x: 100
});

위의 코드에서는 element가 화면에 들어올 때까지 트리거가 되고, 스크롤을 내릴 때 x 좌표를 100픽셀로 이동하는 애니메이션을 만듭니다.

GSAP에서는 이 외에도 다양한 개념과 용어가 사용됩니다. 이 글에서는 주요 개념과 용어만을 다루었지만, GSAP의 전체 기능과 사용법에 대해서는 공식 문서를 참고하시기 바랍니다.

1. 트윈(Tween)

2. 이징(Easing)

3. 시퀀스(Sequence)

4. 플러그인(Plugin)

참고 자료