[javascript] TweenMax에서 멀티플렉스 애니메이션을 어떻게 구현할 수 있나요?

27 Nov 2023

javascript

먼저, TweenMax를 다운로드하고 HTML 문서에 포함시킵니다. 다음으로, 애니메이션을 적용하고자 하는 요소들을 선택합니다. 일반적으로 CSS 선택자를 사용하여 요소들을 찾습니다.

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
</head>
<body>
  <div class="element">Element 1</div>
  <div class="element">Element 2</div>
  <div class="element">Element 3</div>

  <script>
    // 요소들을 선택합니다.
    const elements = document.querySelectorAll('.element');

    // 멀티플렉스 애니메이션을 구현합니다.
    gsap.staggerTo(elements, 1, { opacity: 0, x: 100, y: 100 }, 0.5);
  </script>
</body>
</html>

위의 예제에서 querySelectorAll 메소드를 사용하여 element 클래스를 가진 모든 요소들을 선택합니다. 그리고 staggerTo 메소드를 사용하여 선택된 요소들에 대한 애니메이션을 정의합니다. 이 메소드는 선택된 요소들에 대해 순차적으로 애니메이션 효과를 적용합니다. 각 애니메이션 간의 간격은 마지막 인자로 전달되는 숫자값으로 조정할 수 있습니다.

위의 예제에서는 선택된 요소들에 대해 1초 동안 투명도를 0으로 설정하고, x축으로 100px, y축으로 100px 이동하는 애니메이션 효과를 적용하였습니다. 각 요소들의 애니메이션은 0.5초 간격으로 순차적으로 실행됩니다.

TweenMax의 staggerTo 메소드를 사용하여 멀티플렉스 애니메이션을 구현할 수 있습니다. 이를 통해 여러 요소들을 동시에 애니메이션화할 수 있고, 각 요소들에 대한 애니메이션 효과를 순차적으로 적용할 수 있습니다.

더 많은 TweenMax의 기능과 사용법에 대해서는 GSAP 공식 문서를 참고하시기 바랍니다.