Colin's Blog
[javascript] GSAP를 사용하여 웹 애니메이션 만들기

GSAP (GreenSock Animation Platform)은 웹 애니메이션을 만들기 위한 JavaScript 라이브러리입니다. GSAP는 강력한 트윈(Tween) 엔진을 제공하여 웹 요소의 속성을 부드럽게 변화시킬 수 있습니다. 이 글에서는 GSAP의 기본적인 사용법과 몇 가지 예제를 소개하겠습니다.

GSAP 설치하기

GSAP를 사용하기 위해선 먼저 해당 라이브러리를 설치해야 합니다. GSAP는 npm을 통해 설치할 수 있습니다. 다음 명령어를 사용하여 GSAP를 설치해주세요.

npm install gsap

기본 애니메이션 만들기

GSAP를 사용하여 기본 애니메이션을 만들기 위해서는 TweenMax 객체를 이용합니다. 다음 예제는 div 요소를 2초 동안 가로로 이동시키는 애니메이션을 만드는 예제입니다.

import { TweenMax } from "gsap"

const div = document.querySelector("div");

TweenMax.to(div, 2, { x: 200 });

위 예제에서 TweenMax.to() 함수를 사용하여 div 요소를 2초 동안 x축으로 200px 만큼 이동시키는 애니메이션을 만들었습니다.

추가적인 기능 사용하기

GSAP는 다양한 기능을 제공합니다. 몇 가지 예제를 통해 추가적인 기능을 살펴보겠습니다.

애니메이션 순차 실행하기

여러 개의 요소에 대한 애니메이션을 순차적으로 실행하고 싶다면 to() 함수를 체인 형식으로 연결하여 사용할 수 있습니다. 다음 예제는 1초 동안 첫 번째로 선택된 요소를 위로 이동시킨 후, 0.5초 동안 두 번째로 선택된 요소를 오른쪽으로 이동시키는 애니메이션을 만드는 예제입니다.

TweenMax.to(div1, 1, { y: -200 })
        .to(div2, 0.5, { x: 100 });

이징(Easing) 사용하기

애니메이션의 부드러운 움직임을 위해 이징을 적용할 수 있습니다. 이징은 움직임의 시작과 끝을 조절하여 애니메이션을 자연스럽게 만들어줍니다. GSAP에서는 다양한 이징 옵션을 제공합니다. 다음 예제는 div 요소를 2초 동안 가로로 이동시키면서 이징 효과를 적용하는 예제입니다.

TweenMax.to(div, 2, { x: 200, ease: Power2.easeOut });

위 예제에서 ease 옵션에 Power2.easeOut를 설정하여 가속도를 조절하였습니다.

결론

GSAP를 사용하면 간편하게 웹 애니메이션을 만들 수 있습니다. 이번 글에서는 GSAP의 기본적인 사용법과 몇 가지 예제를 살펴보았습니다. GSAP의 더 많은 기능과 옵션을 활용하여 다양한 애니메이션을 구현해보세요!

참고 자료

© 2018 Colin. All rights reserved.