상태 제어 및 콜백

✨ 애니메이션 상태 제어와 콜백 함수

GSAP로 만든 애니메이션은 비디오 플레이어처럼 play(), pause(), reverse() 등의 메서드를 통해 언제든지 멈추거나 뒤로 감을 수 있습니다. 또한, 애니메이션이 시작하거나 완전히 종료되었을 때 특정 자바스크립트 함수를 실행하고 싶다면 onComplete, onStart 같은 콜백(Callback) 함수를 연결할 수 있습니다.

[그림 1] 애니메이션 상태 제어와 콜백 실행 시점의 시각적 메타포

1. 주요 제어 메서드 (Control Methods)

애니메이션을 변수에 담으면 아래와 같은 메서드를 호출하여 재생 상태를 관리할 수 있습니다.

JAVASCRIPT
// 1. 애니메이션을 변수에 할당 (초기 실행 방지)
const tween = gsap.to(".box", { x: 300, paused: true });
// 2. 버튼 클릭 이벤트에 제어 메서드 연결
playBtn.addEventListener("click", () => tween.play());
pauseBtn.addEventListener("click", () => tween.pause());
reverseBtn.addEventListener("click", () => tween.reverse());

메서드	설명 (인자 활용법)
`play(time?)`	애니메이션을 정방향으로 재생합니다. * 선택 인자로 시간(초)을 넣으면 해당 시점부터 재생합니다. 예: `play(2)` (2초 지점부터 시작)
`pause(time?)`	진행 중인 애니메이션을 일시 정지합니다. * 특정 시점에서 정지시키고 싶다면 `pause(1.5)`와 같이 시간을 지정할 수 있습니다. (초기화 할 때 `pause(0)` 활용)
`reverse(time?)`	애니메이션을 역방향으로 재생합니다. (되감기) * 특정 시점부터 되감고 싶다면 `reverse(2)` 등 기준 시간을 넣을 수 있습니다.
`restart(includeDelay?)`	처음부터 다시 재생합니다. * 첫 번째 인자로 `true`를 넣으면 처음에 설정한 `delay`(대기 시간)까지 다시 기다렸다가 재생합니다. (기본값: false, 즉시 재시작)

2. 콜백 함수 (Callbacks)

애니메이션의 생명주기(Lifecycle)에 맞춰 원하는 코드를 실행할 수 있습니다.

JAVASCRIPT
// 콜백을 통해 특정 시점에 코드 실행하기
gsap.to(".box", {
  x: 300,
  duration: 2,
  onStart: () => console.log("애니메이션 시작!"),
  onUpdate: () => console.log("진행 중..."),
  onComplete: () => console.log("애니메이션 종료!"),
  onReverseComplete: () => console.log("되감기 종료!")
});

onStart()

시작될 때 1회 실행

onUpdate()

매 프레임마다 실행

onComplete()

정방향 종료 후 실행

onReverseComplete()

되감기 완료 후 실행

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> <div class="playground"> <div class="box"></div> <div class="controls"> <button id="playBtn" class="btn play">▶ Play</button> <button id="pauseBtn" class="btn pause">❚❚ Pause</button> <button id="reverseBtn" class="btn reverse">◀ Reverse</button> <button id="restartBtn" class="btn restart">↺ Restart</button> </div> <div id="status" class="status-msg">대기 중...</div> </div>

메서드

설명 (인자 활용법)

play(time?)

애니메이션을 정방향으로 재생합니다.
* 선택 인자로 시간(초)을 넣으면 해당 시점부터 재생합니다. 예: play(2) (2초 지점부터 시작)

pause(time?)

진행 중인 애니메이션을 일시 정지합니다.
* 특정 시점에서 정지시키고 싶다면 pause(1.5)와 같이 시간을 지정할 수 있습니다. (초기화 할 때 pause(0) 활용)

reverse(time?)

애니메이션을 역방향으로 재생합니다. (되감기)
* 특정 시점부터 되감고 싶다면 reverse(2) 등 기준 시간을 넣을 수 있습니다.

restart(includeDelay?)

처음부터 다시 재생합니다.
* 첫 번째 인자로 true를 넣으면 처음에 설정한 delay(대기 시간)까지 다시 기다렸다가 재생합니다. (기본값: false, 즉시 재시작)