애니메이션 상태 제어(Play, Pause)와 콜백 함수(onComplete)

애니메이션 상태 제어와 콜백 함수 (Control & Callbacks)

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

[그림 1] 재생 상태를 제어하는 컨트롤러와 애니메이션 종료 시 발생하는 콜백 이벤트

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

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

메서드	설명
`play()`	애니메이션을 정방향으로 재생합니다.
`pause()`	진행 중인 애니메이션을 일시 정지합니다.
`reverse()`	애니메이션을 역방향으로 재생합니다. (되감기)
`restart()`	처음부터 다시 재생합니다.

2. 콜백 함수 (Callbacks)

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

onStart()

애니메이션이 시작될 때 1회 실행

onUpdate()

애니메이션이 진행되는 매 프레임마다 실행

onComplete()

애니메이션이 완전히 종료된 후 실행

<style>
.box { width: 100px; height: 100px; background: #8b5cf6; border-radius: 12px; }
.controls { margin-top: 15px; }
button { padding: 8px 16px; margin-right: 5px; cursor: pointer; }
</style>
<div class="box"></div>
<div class="controls">
  <button id="play">Play</button>
  <button id="pause">Pause</button>
  <button id="reverse">Reverse</button>
  <button id="restart">Restart</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
// 변수에 애니메이션 저장 (초기엔 일시정지 상태로)
const tween = gsap.to('.box', { 
  x: 300, 
  rotation: 360, 
  duration: 2, 
  paused: true,
  onComplete: () => alert("도착 완료!")
});

document.querySelector('#play').onclick = () => tween.play();
document.querySelector('#pause').onclick = () => tween.pause();
document.querySelector('#reverse').onclick = () => tween.reverse();
document.querySelector('#restart').onclick = () => tween.restart();
</script>

실행 결과