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

27 Nov 2023

TweenMax를 사용하여 애니메이션 효과와 속도를 변경하려면 다음 단계를 따릅니다.

TweenMax 라이브러리를 웹 페이지에 추가하십시오. 일반적으로 CDN으로 제공되므로 다음 코드를 <head> 태그 안에 추가하면 됩니다.

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

애니메이션을 적용할 HTML 요소를 선택합니다. 예를 들어, div 요소에 애니메이션을 적용하려면 document.querySelector() 메서드를 사용하여 해당 요소를 선택합니다.

const element = document.querySelector('div');

TweenMax를 사용하여 애니메이션을 설정하고 실행합니다. to() 메서드를 사용하여 요소에 애니메이션을 적용하고, duration 매개변수를 사용하여 애니메이션의 지속 시간을 설정합니다.

const animation = gsap.to(element, { duration: 2, opacity: 0.5, x: 100 });

위의 예제에서는 element 요소에 2초 동안 투명도를 0.5로 변경하고, x축으로 100px 이동하는 애니메이션을 적용했습니다.

애니메이션 효과와 속도를 동적으로 변경하려면 TweenMax 객체의 메서드를 사용합니다. 애니메이션을 일시중지하거나 다시 시작하려면 pause() 및 play() 메서드를, 애니메이션의 속도를 조절하려면 timeScale() 메서드를 사용합니다.

animation.pause(); // 애니메이션 일시중지
animation.play(); // 애니메이션 다시 시작
animation.timeScale(2); // 애니메이션 속도를 2배로 설정

위의 예제에서는 animation 객체를 사용하여 애니메이션을 일시중지, 다시 시작 및 속도를 조절하는 방법을 보여줍니다.

따라서, TweenMax를 사용하면 JavaScript를 통해 애니메이션의 효과와 속도를 동적으로 변경할 수 있습니다. TweenMax의 다양한 메서드를 사용하여 원하는 애니메이션 효과를 만들어보시기 바랍니다.