transformOrigin은 애니메이션이 적용되는 요소의 중심점을 설정하는 속성입니다. 기본적으로 “50% 50%”로 설정되어 있어서 요소의 중앙에 애니메이션이 적용됩니다. 하지만 이 값을 조정함으로써 요소의 다른 위치에서 애니메이션을 시작할 수 있습니다.

rotation은 요소를 회전시키는 속성입니다. 각도로 지정하며, 양수값은 시계 방향으로, 음수값은 반시계 방향으로 회전합니다. 이 속성을 사용하여 애니메이션의 기울기를 설정할 수 있습니다.

아래는 TweenMax를 사용하여 애니메이션의 기울기와 중심점을 동적으로 설정하는 예시 코드입니다.

TweenMax.to("#myElement", 1, {
  rotation: 45, // 45도 각도로 회전
  transformOrigin: "top left" // 상단 왼쪽을 중심점으로 설정
});

위의 코드는 #myElement라는 ID를 가진 요소에 애니메이션을 적용하는 예시입니다. rotation 속성을 45로 설정하여 요소를 45도로 회전시키고, transfromOrigin 속성을 “top left”로 설정하여 요소의 왼쪽 상단을 중심점으로 지정합니다.

더 자세한 내용은 TweenMax의 공식 문서를 참고해주시기 바랍니다. TweenMax 공식 문서