TweenMax는 JavaScript 애니메이션 라이브러리로, 애니메이션을 시간에 따라 변화시키는 다양한 효과를 제공합니다. 애니메이션의 효과를 시간에 따라 변화시키기 위해서는 ‘from’, ‘to’, ‘fromTo’ 등의 메소드를 사용할 수 있습니다.

1. from() 메소드: from() 메소드를 사용하면 애니메이션의 시작 상태를 정의할 수 있습니다. 다음은 from() 메소드를 사용하여 요소의 위치를 초기 상태로 설정하는 예시입니다:

TweenMax.from(element, 1, { x: -100, opacity: 0 });

위의 예시에서 element는 애니메이션을 적용할 요소를 지정합니다. 1은 애니메이션의 지속 시간을 초 단위로 정의하며, { x: -100, opacity: 0 }는 요소의 x 위치와 투명도를 애니메이션의 시작 상태로 설정하는 속성입니다.

2. to() 메소드: to() 메소드를 사용하면 애니메이션의 종료 상태를 정의할 수 있습니다. 다음은 to() 메소드를 사용하여 요소의 위치와 크기를 종료 상태로 설정하는 예시입니다:

TweenMax.to(element, 1, { x: 100, y: 200, scale: 2 });

위의 예시에서는 element를 주어진 시간(1초) 동안 x축으로 100만큼, y축으로 200만큼 이동시키고, 요소의 크기를 2배로 조절하는 애니메이션을 정의합니다.

3. fromTo() 메소드: fromTo() 메소드를 사용하면 애니메이션의 시작 상태와 종료 상태를 동시에 정의할 수 있습니다. 다음은 fromTo() 메소드를 사용하여 요소의 너비를 애니메이션을 시작할 때부터 100으로 설정하고, 애니메이션 종료 시에는 200으로 너비를 변경하는 예시입니다:

TweenMax.fromTo(element, 1, { width: 100 }, { width: 200 });

위의 예시에서는 element의 너비를 처음에는 100으로 설정하고, 애니메이션 동안에는 너비를 200으로 변경합니다.

TweenMax에서 제공하는 다양한 메소드를 사용하여 시간에 따라 애니메이션의 효과를 원하는 대로 조절할 수 있습니다. 세부적인 사용법은 공식 TweenMax 문서를 참고하시기 바랍니다.

참고 자료:

• TweenMax 공식 문서: https://greensock.com/docs/v3/GSAP/TweenMax/