[javascript] GSAP의 다양한 플러그인과 확장 기능

27 Nov 2023

javascript

GSAP(GreenSock Animation Platform)은 JavaScript 기반의 애니메이션 라이브러리로, 웹 애니메이션을 쉽고 강력하게 제작할 수 있게 해줍니다. GSAP는 다양한 플러그인과 확장 기능을 제공하여 더욱 다양한 애니메이션 효과를 구현할 수 있습니다. 이번 글에서는 GSAP의 일부 플러그인과 확장 기능에 대해 알아보겠습니다.

ScrollTrigger

ScrollTrigger는 화면 스크롤에 반응하여 애니메이션을 트리거하는 기능을 제공합니다. 스크롤 위치에 따라 요소의 위치 또는 특정 속성을 변경할 수 있으며, 페이지 스크롤 애니메이션을 쉽게 구현할 수 있습니다.

gsap.registerPlugin(ScrollTrigger);
gsap.to(".element", {
  x: 100,
  scrollTrigger: {
    trigger: ".element",
    start: "top 80%",
    end: "bottom 20%",
    scrub: true,
  }
});

Draggable

Draggable 플러그인은 마우스 또는 터치 기반의 드래그 가능한 요소를 생성할 수 있습니다. 이를 통해 사용자의 상호작용에 따라 요소를 이동하거나 변경할 수 있습니다.

gsap.registerPlugin(Draggable);
Draggable.create(".element", {
  bounds: ".container",
  onDrag: function() {
    console.log("Dragging!");
  },
  onDragEnd: function() {
    console.log("Drag End!");
  }
});

MotionPathPlugin

MotionPathPlugin은 요소를 사전 정의된 경로에 따라 움직일 수 있도록 해줍니다. SVG 패스를 사용하여 원하는 경로를 정의하고, 해당 경로에 따라 요소가 이동하도록 설정할 수 있습니다.

gsap.registerPlugin(MotionPathPlugin);
gsap.to(".element", {
  duration: 2,
  repeat: -1,
  yoyo: true,
  motionPath: {
    path: "M100 100 C200 200 300 0 400 100 S600 300 700 200",
    autoRotate: true,
  }
});

위에서 소개한 플러그인 외에도 GSAP에는 많은 다른 플러그인과 확장 기능이 있습니다. GSAP 공식 문서를 참고하면 다양한 효과를 쉽게 구현할 수 있습니다.

참고 자료: