TweenMax를 사용하여 애니메이션의 시작 및 종료 시간을 설정하는 방법은 다음과 같습니다.

아래의 예제 코드에서는 TweenMax.to() 메서드를 사용하여 div 요소를 2초 간격으로 이동시키는 애니메이션을 만드는 방법을 보여줍니다.

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

TweenMax.to(element, 2, {
  x: 200, // x축으로 200px 이동
  y: 100, // y축으로 100px 이동
  repeat: 3, // 애니메이션을 3번 반복
  yoyo: true, // 애니메이션을 순방향 및 역방향으로 반복
  onStart: () => {
    console.log("애니메이션 시작");
  },
  onComplete: () => {
    console.log("애니메이션 종료");
  },
});

위의 코드에서, TweenMax.to() 메서드에는 애니메이션을 적용할 요소와 애니메이션의 속성을 설정하는 객체를 전달합니다. 이 객체의 x 및 y 속성은 요소를 특정 위치로 이동하는 역할을 합니다. repeat 속성은 애니메이션을 몇 번 반복할지를 설정하며, yoyo 속성은 애니메이션을 순방향 및 역방향으로 반복할지를 설정합니다.

또한, onStart와 onComplete 속성을 사용하여 애니메이션의 시작 및 종료 시점에 실행할 콜백 함수를 설정할 수도 있습니다. 위의 예제에서는 각각 “애니메이션 시작”과 “애니메이션 종료”라는 메시지를 출력하는 콜백 함수를 정의하고 있습니다.

이렇게 작성된 코드는 TweenMax 라이브러리가 로드되어 있다면 설정한 속성에 따라 애니메이션을 실행할 것입니다.

• TweenMax 라이브러리: https://greensock.com/docs/v3/GSAP
• TweenMax.to() 메서드: https://greensock.com/docs/v3/GSAP/static.to()