TweenMax는 JavaScript의 애니메이션 라이브러리 중 하나로, 다양한 애니메이션 효과를 사용할 수 있습니다. 몇 가지 주요한 애니메이션 효과에 대해 설명하겠습니다.

1. 이동 (Move) TweenMax를 사용하면 요소를 특정 위치로 이동시킬 수 있습니다. to() 메서드를 사용하여 이동할 위치를 지정하면 해당 요소가 자연스럽게 그 위치로 이동됩니다.

예시 코드:

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

1. 회전 (Rotate) TweenMax를 사용하여 요소를 회전시킬 수 있습니다. to() 메서드의 rotation 속성을 사용하여 회전 각도를 지정하면 해당 요소가 회전됩니다.

예시 코드:

TweenMax.to(element, 1, { rotation: 180 });

1. 크기 조정 (Scale) TweenMax를 사용하여 요소의 크기를 조정할 수 있습니다. to() 메서드의 scale 속성을 사용하여 가로 및 세로 크기의 비율을 지정하면 해당 요소가 확대 또는 축소됩니다.

예시 코드:

TweenMax.to(element, 1, { scale: 2 });

1. 투명도 조정 (Opacity) TweenMax를 사용하여 요소의 투명도를 조절할 수 있습니다. to() 메서드의 opacity 속성을 사용하여 투명도 값을 지정하면 해당 요소가 서서히 나타나거나 사라집니다.

예시 코드:

TweenMax.to(element, 1, { opacity: 0.5 });

TweenMax를 사용하면 여러 개의 애니메이션 효과를 동시에 적용할 수도 있습니다. to() 메서드의 속성들을 조합하고 원하는 애니메이션을 만들어보세요.

더 많은 TweenMax 애니메이션 효과 및 사용법을 알고 싶다면 GreenSock의 공식 문서를 참조해주세요.