[javascript] TweenMax를 사용하여 애니메이션의 시간과 이동 경로를 동적으로 설정할 수 있나요?

다음은 TweenMax를 사용하여 애니메이션의 시간과 이동 경로를 동적으로 설정하는 예시 코드입니다.

// 요소 선택
const element = document.querySelector('.element');

// TweenMax를 사용하여 애니메이션 생성
const animation = new TweenMax.to(element, 1, {
  x: 300, // x축으로 300픽셀 이동
  y: 200, // y축으로 200픽셀 이동
  ease: Power2.easeInOut // 이동 경로에 이징 효과 적용
});

위의 예시 코드에서는 .element라는 클래스를 가진 요소를 선택하고, xy 속성을 사용하여 이동 경로를 설정합니다. ease 속성은 이징 효과를 적용하여 애니메이션의 움직임을 부드럽게 만들어 줍니다.

TweenMax를 사용하여 애니메이션의 시간과 이동 경로를 동적으로 설정할 수 있으므로, 사용자 입력 또는 다른 이벤트와 상호작용하여 애니메이션을 제어할 수도 있습니다.

더 자세한 정보는 TweenMax의 공식 문서를 참조하십시오.