이번 포스트에서는 GreenSock Animation Platform (GSAP)을 사용하여 라인 애니메이션과 동적 그라픽스를 만드는 방법에 대해 알아보겠습니다. GSAP는 JavaScript에 기반한 강력한 애니메이션 라이브러리로, 웹 개발자들 사이에서 널리 사용되고 있습니다.

GSAP 소개

GSAP는 간단하고 직관적인 API를 제공하여 복잡한 애니메이션을 쉽게 만들 수 있도록 도와줍니다. 이를 통해 속성, 색상, 위치 등을 변경하여 요소의 동적인 움직임을 구현할 수 있습니다. 또한, SVG와 같은 벡터 그래픽을 다룰 때에도 쉽게 조작할 수 있습니다.

라인 애니메이션 만들기

라인 애니메이션을 만들기 위해 GSAP의 TweenMax 클래스를 사용할 수 있습니다. 아래 코드는 단순한 예시입니다.

const line = document.querySelector("#line");

TweenMax.to(line, 2, {
  x: 300, // x 좌표로 이동
  rotation: 180, // 회전
  repeat: -1, // 무한 반복
  yoyo: true // 앞뒤로 반복
});

위의 코드는 line 요소를 2초 동안 오른쪽으로 300픽셀 이동하고, 180도 회전하며, 무한 반복되는 애니메이션을 만듭니다.

동적 그라픽스 만들기

GSAP를 사용하여 동적으로 그라픽스를 조작하는 것도 가능합니다. 예를 들어, 사각형의 색상을 변경하거나 크기를 변화시킬 수 있습니다.

const box = document.querySelector("#box");

TweenMax.to(box, 2, {
  backgroundColor: "red", // 배경색을 빨간색으로 변경
  width: 200, // 너비를 200픽셀로 변경
  height: 200, // 높이를 200픽셀로 변경
  repeat: -1, // 무한 반복
  yoyo: true // 앞뒤로 반복
});

위의 코드는 box 요소의 배경색을 빨간색으로 변경하고, 너비와 높이를 200픽셀로 변경하는 애니메이션을 무한 반복합니다.

결론

GSAP를 사용하면 JavaScript를 통해 웹 애니메이션을 쉽게 구현할 수 있습니다. 이번 포스트에서는 GSAP를 사용하여 라인 애니메이션과 동적 그라픽스를 만드는 방법을 알아보았습니다. GSAP의 다양한 기능과 옵션을 활용하여 더 복잡하고 창의적인 애니메이션을 만들어보세요.

더 자세한 정보는 공식 문서를 참고하시기 바랍니다.