[javascript] GSAP의 이벤트 핸들링 및 애니메이션 제어 방법

27 Nov 2023

javascript

GSAP(GreenSock Animation Platform)은 웹 애니메이션을 쉽게 구현할 수 있는 강력한 자바스크립트 라이브러리입니다. 이 블로그 포스트에서는 GSAP를 사용하여 이벤트를 핸들링하고 애니메이션을 제어하는 방법에 대해 알아보겠습니다.

이벤트 핸들링

GSAP에서 이벤트를 핸들링하기 위해 on 메서드를 사용합니다. 이 메서드는 특정 이벤트가 발생할 때 실행할 콜백 함수를 등록하는 역할을 합니다.

gsap.to(element, {
    duration: 1,
    x: 100,
    onComplete: function() {
        console.log("애니메이션 완료");
    }
});

위 예제에서 onComplete 이벤트를 이용하여 애니메이션 완료 후에 콜백 함수를 실행하고 있습니다. 이외에도 onStart, onUpdate, onReverseComplete 등 다양한 이벤트를 핸들링할 수 있습니다.

애니메이션 제어

GSAP는 애니메이션을 제어하기 위한 다양한 메서드를 제공합니다. 다음은 가장 일반적인 메서드 몇 가지입니다.

pause: 애니메이션을 일시정지합니다.
resume: 일시정지된 애니메이션을 재개합니다.
restart: 애니메이션을 처음부터 다시 시작합니다.
reverse: 애니메이션을 역방향으로 실행합니다.
kill: 애니메이션을 강제로 종료하고 제거합니다.

var tween = gsap.to(element, {
    duration: 1,
    x: 100
});

// 일시정지
tween.pause();

// 재개
tween.resume();

// 다시 시작
tween.restart();

// 역방향 실행
tween.reverse();

// 종료
tween.kill();

위 예제에서 pause, resume, restart 등의 메서드를 사용하여 애니메이션을 제어하고 있습니다. 이외에도 트윈(Tween) 객체를 사용하여 진행 중인 애니메이션을 조작할 수도 있습니다.

결론

GSAP를 사용하면 웹 애니메이션을 쉽게 구현할 수 있으며, 이벤트 핸들링과 애니메이션 제어를 통해 원하는 동작을 자유롭게 조작할 수 있습니다. GSAP의 다양한 기능을 활용하여 웹 페이지에 동적이고 효과적인 애니메이션을 구현해보세요.

이벤트 핸들링

애니메이션 제어

결론

참고 자료