플레이어 컨트롤을 TweenMax를 사용하여 구현하는 것은 매우 간단하고 효과적입니다. TweenMax는 자바스크립트에서 애니메이션을 쉽게 만들 수 있는 라이브러리이며, 요소의 속성을 제어하여 움직임을 부드럽게 만들어 줄 수 있습니다.

먼저, TweenMax 라이브러리를 HTML 문서에 추가합니다.

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

그런 다음, 플레이어 컨트롤을 나타내는 HTML 요소를 만듭니다. 예를 들어, 플레이/일시정지 버튼을 만들고 싶다면 다음과 같이 할 수 있습니다.

<button id="playPauseBtn">Play/Pause</button>

이제 자바스크립트 코드를 작성하여 플레이어 컨트롤을 구현할 차례입니다. 다음은 간단한 예제입니다.

// 버튼 요소를 가져옴
const playPauseBtn = document.getElementById('playPauseBtn');

// 애니메이션을 제어할 변수
let isPlaying = false;
let tween;

// 버튼 클릭 이벤트 핸들러
playPauseBtn.addEventListener('click', () => {
  if (isPlaying) {
    // 일시정지
    tween.pause();
    isPlaying = false;
    playPauseBtn.textContent = 'Play';
  } else {
    // 재생
    tween.play();
    isPlaying = true;
    playPauseBtn.textContent = 'Pause';
  }
});

// 요소에 애니메이션을 적용
tween = gsap.to('#playPauseBtn', {
  duration: 2,
  x: 200,
  repeat: -1,
  yoyo: true,
});

위의 코드에서는 버튼 요소를 가져와서 클릭 이벤트 핸들러를 추가합니다. 클릭 이벤트 핸들러는 isPlaying 변수를 사용하여 현재 플레이어가 재생 중인지 여부를 추적하고, tween.pause() 또는 tween.play()를 호출하여 애니메이션을 일시정지하거나 재생합니다. 버튼의 텍스트도 해당 상태에 따라 변경됩니다.

마지막으로, gsap.to() 메소드를 사용하여 선택한 요소에 애니메이션을 적용합니다. 위의 예제에서는 요소를 오른쪽으로 200 픽셀 이동하도록 설정되어 있으며, repeat 및 yoyo 옵션을 사용하여 애니메이션을 반복하고 왕복하도록 설정되어 있습니다.

이러한 방식으로 TweenMax를 사용하여 플레이어 컨트롤을 구현할 수 있습니다. TweenMax를 사용하면 다양한 애니메이션 효과를 쉽게 적용할 수 있으며, 사용자의 인터랙션에 따라 애니메이션을 제어할 수 있습니다. 자세한 내용은 TweenMax 공식 문서를 참조하시기 바랍니다.

참고 자료:

• TweenMax 공식 문서
• GSAP(CodePen 예제)