[javascript] TweenMax에서 커스텀 애니메이션을 어떻게 생성할 수 있나요?

27 Nov 2023

javascript

TweenMax는 JavaScript에서 강력한 애니메이션 라이브러리입니다. 이 라이브러리를 사용하여 커스텀 애니메이션을 생성하는 방법을 알아보겠습니다.

먼저, TweenMax를 HTML 페이지에 추가해야 합니다. CDN을 통해 다음 코드를 <head> 태그 안에 추가합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>

이제 커스텀 애니메이션을 생성할 준비가 되었습니다. TweenMax의 to() 메서드를 사용하여 속성과 시간을 지정하세요. 아래는 간단한 예시입니다.

const element = document.getElementById('myElement');

TweenMax.to(element, 1, {
  x: 100,
  y: 200,
  opacity: 0.5,
  scale: 2,
  ease: Power2.easeOut, // 애니메이션 이징 설정
  onComplete: function() {
    // 애니메이션이 완료된 후 실행될 코드
    console.log('애니메이션이 완료되었습니다.');
  }
});

위의 코드에서 element는 애니메이션을 적용할 HTML 요소입니다. x, y, opacity, scale은 애니메이션 중 변경될 속성들을 나타냅니다. ease는 애니메이션의 이징이며, onComplete는 애니메이션이 완료된 후 실행될 콜백 함수입니다.

TweenMax를 사용하면 움직임, 페이드 인/아웃, 확대/축소 등 다양한 애니메이션 효과를 쉽게 구현할 수 있습니다. 문서나 예제 코드를 살펴보면서 더 많은 기능을 익히시기 바랍니다.

더 자세한 정보는 GreenSock 공식 문서를 참조하시기 바랍니다.