GSAP(GreenSock Animation Platform)은 웹 애니메이션을 만들기 위한 JavaScript 라이브러리입니다. 이를 사용하면 간단하게 타이머 애니메이션 및 카운트다운 효과를 만들 수 있습니다. 이번 블로그 포스트에서는 GSAP를 사용하여 타이머 애니메이션을 만들어보고, 카운트다운 효과를 추가하는 방법을 알아보겠습니다.

타이머 애니메이션 만들기

GSAP의 TweenMax를 사용하여 타이머 애니메이션을 만들어봅시다. 다음은 타이머를 0부터 10까지 1초동안 증가시키는 코드입니다.

const timer = document.getElementById('timer'); // 타이머를 표시할 엘리먼트 선택

TweenMax.to(timer, 1, {
  counter: 10, // 10까지 증가
  roundProps: 'counter',
  onUpdate: function () {
    timer.innerText = this.target.counter.toFixed(0); // 타이머 업데이트
  },
});

위의 코드에서는 timer라는 ID를 가진 엘리먼트를 선택하고, counter라는 속성을 사용하여 타이머의 값을 조정합니다. roundProps는 속성을 반올림하여 소수점 이하의 값을 제거합니다. onUpdate 함수에서는 업데이트 시마다 타이머 값을 업데이트합니다.

카운트다운 효과 추가하기

이번에는 타이머를 10부터 0까지 1초동안 감소시키는 카운트다운 효과를 추가해보겠습니다. 다음은 해당 효과를 구현한 코드입니다.

const countdown = document.getElementById('countdown'); // 카운트다운을 표시할 엘리먼트 선택

TweenMax.to(countdown, 1, {
  counter: 0, // 0까지 감소
  roundProps: 'counter',
  onUpdate: function () {
    countdown.innerText = this.target.counter.toFixed(0); // 카운트다운 업데이트
  },
  onComplete: function () {
    alert('타이머 종료'); // 타이머가 완료되면 알림
  },
});

위의 코드에서는 마찬가지로 countdown라는 ID를 가진 엘리먼트를 선택합니다. counter 속성을 사용하여 카운트다운 값을 조정하고, onUpdate 함수에서 카운트다운 값을 업데이트합니다. onComplete 함수는 카운트다운이 완료되면 실행되는 함수로, 여기에서는 타이머 종료 알림을 표시합니다.

GSAP를 사용하여 타이머 애니메이션과 카운트다운 효과를 만드는 방법을 알아보았습니다. GSAP는 강력한 웹 애니메이션 라이브러리이며, 다양한 효과를 쉽게 구현할 수 있습니다.

더 많은 정보를 원하신다면, GSAP 공식 문서를 참고하시기 바랍니다.