TweenMax는 JavaScript에서 애니메이션을 만드는 데 사용되는 강력한 라이브러리입니다. 반전(reverse) 애니메이션은 요소가 처음 상태에서 특정 애니메이션을 수행한 후, 다시 처음 상태로 돌아가는 애니메이션 효과입니다. 이를 구현하는 방법을 알아보겠습니다.

// 요소 선택
const element = document.querySelector(".my-element");

// TweenMax 애니메이션 생성
const animation = TweenMax.to(element, 1, { opacity: 0, x: 100 });

// 반전 애니메이션 생성
const reverseAnimation = animation.reverse();

// 반전 애니메이션 실행
reverseAnimation.play();

위의 코드에서는 my-element라는 클래스를 가진 요소를 선택하고, opacity를 0으로, x를 100px로 애니메이션화하는 TweenMax 애니메이션을 생성합니다. 그리고 reverse() 메서드를 사용하여 생성한 애니메이션을 반전시킵니다. 마지막으로 play() 메서드를 호출하여 반전 애니메이션을 실행합니다.

이제, 요소는 처음 상태에서 애니메이션이 수행되어 왼쪽으로 이동하고 투명해지며, 다시 처음 상태로 역방향으로 애니메이션이 수행되어 오른쪽으로 이동하고 다시 투명해집니다.

TweenMax에서 반전(reverse) 애니메이션을 만드는 방법을 알아보았습니다. 더 많은 정보는 TweenMax 공식 문서를 참조하시기 바랍니다.