TweenMax는 JavaScript로 구현된 애니메이션 라이브러리입니다. 시작 지점과 이동 경로를 설정하여 원하는 모션을 만들 수 있습니다.

시작 지점 설정

TweenMax에서 애니메이션의 시작 지점을 설정하는 방법은 간단합니다. 대상 객체의 초기 위치를 지정하면 됩니다.

예를 들어, ‘box’라는 아이디를 가진 div 요소에 대한 애니메이션을 만들고자 한다면, 다음과 같이 시작 지점을 설정할 수 있습니다.

TweenMax.set('#box', { x: 100, y: 200 });

위의 코드에서 x와 y는 각각 요소의 가로 위치와 세로 위치를 나타냅니다. 따라서, ‘box’ 요소는 x축으로 100px, y축으로 200px 이동한 위치에서 애니메이션이 시작됩니다.

이동 경로 설정

TweenMax에서 이동 경로를 설정하는 방법은 다양합니다. 다음은 몇 가지 예시입니다.

1. to 메소드를 사용하여 애니메이션 생성

TweenMax.to('#box', 2, { x: 500, y: 300 });

위의 코드에서 to 메소드는 지정한 요소를 2초 동안 x축으로 500px, y축으로 300px 이동시키는 애니메이션을 생성합니다.

2. fromTo 메소드를 사용하여 애니메이션 생성

TweenMax.fromTo('#box', 3, { x: 0, y: 0 }, { x: 400, y: 200 });

위의 코드에서 fromTo 메소드는 지정한 요소를 3초 동안 x축으로 0px, y축으로 0px에서 x축으로 400px, y축으로 200px로 이동시키는 애니메이션을 생성합니다.

3. staggerTo 메소드를 사용하여 애니메이션 생성

var list = document.querySelectorAll('.item');
TweenMax.staggerTo(list, 0.5, { x: 100, y: 50 }, 0.2);

위의 코드에서 staggerTo 메소드는 .item 클래스를 가진 요소들에 대해 0.5초 간격으로 애니메이션을 생성합니다. 각각의 요소는 x축으로 100px, y축으로 50px 이동합니다.

결론

TweenMax를 사용하여 애니메이션의 시작 지점과 이동 경로를 설정할 수 있습니다. 시작 지점은 TweenMax.set 메소드를 사용하여 대상 객체의 초기 위치를 지정하면 됩니다. 이동 경로는 to, fromTo, staggerTo 등의 메소드를 사용하여 설정할 수 있습니다. 자세한 사용법은 TweenMax 공식 문서를 참고하시기 바랍니다.