[javascript] TweenMax를 사용하여 애니메이션의 가로와 세로를 어떻게 제어할 수 있나요?

27 Nov 2023

javascript

TweenMax를 사용하여 애니메이션의 가로와 세로를 제어하는 방법을 알려드리겠습니다.

우선, TweenMax 라이브러리를 웹 페이지에 추가해야 합니다. 아래 코드를 <head> 태그 내에 추가하면 됩니다.

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

이제 애니메이션을 제어할 요소를 선택하고 TweenMax를 사용하여 가로와 세로를 변경할 수 있습니다. 아래는 예시 코드입니다.

// 애니메이션 대상 요소 선택
const element = document.getElementById('myElement');

// TweenMax를 사용하여 애니메이션 생성
const animation = gsap.to(element, {
  width: '500px',  // 가로 크기를 500px로 애니메이션
  height: '300px', // 세로 크기를 300px로 애니메이션
  duration: 1,     // 애니메이션 지속 시간 (초 단위)
  ease: 'power2.out' // 애니메이션 이징
});

위의 코드에서 myElement는 애니메이션을 적용할 요소의 ID입니다. 애니메이션의 가로와 세로 크기는 각각 width와 height 속성을 사용하여 설정할 수 있습니다. duration 속성은 애니메이션의 지속 시간을 설정하며, ease 속성은 애니메이션의 이징을 조절합니다.

위의 예제 코드를 웹 페이지에 적용하면, 해당 요소가 주어진 가로와 세로 크기로 애니메이션되는 것을 확인할 수 있습니다.

더 자세한 TweenMax 사용법은 공식 문서를 참조하시기 바랍니다.