[javascript] TweenMax를 이용하여 애니메이션의 효과와 속도를 순차적으로 변경할 수 있나요?

27 Nov 2023

javascript

TweenMax를 사용하기 위해서는 먼저 TweenMax라이브러리를 웹 페이지에 추가해야 합니다. 다음은 HTML 문서의 <head> 태그 안에 TweenMax를 추가하는 예시입니다.

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

이제 TweenMax를 사용하여 애니메이션 효과와 순차 속도를 변경할 수 있습니다. 예를 들어, 아래 코드는 요소가 일정한 간격으로 움직이는 애니메이션을 만드는 예시입니다.

// 요소 선택
const element = document.querySelector("#myElement");

// TweenMax를 사용하여 애니메이션 효과 추가
TweenMax.to(element, 1, { x: "200px", ease: Power1.easeInOut });

// 이전 애니메이션 이후에 실행할 애니메이션
TweenMax.to(element, 1, { y: "200px", ease: Power1.easeInOut });

위의 코드에서 첫 번째 TweenMax.to() 함수는 요소를 오른쪽으로 200px 이동시키는 애니메이션 효과를 추가하고, 두 번째 TweenMax.to() 함수는 첫 번째 애니메이션 후에 요소를 아래로 200px 이동시키는 애니메이션을 추가합니다.

이렇게 순차적으로 TweenMax.to() 함수를 사용하여 여러 애니메이션 효과와 속도를 변화시킬 수 있습니다. TweenMax는 다양한 easing 함수와 옵션을 제공하기 때문에 원하는 애니메이션을 구현할 수 있습니다.

더 자세한 정보와 사용 예시는 GSAP 공식 문서를 참조하시기 바랍니다.