TweenMax는 JavaScript 기반의 애니메이션 라이브러리로, 웹사이트에서 CSS 속성을 부드럽게 제어하고 조작할 수 있게 해줍니다.

다음은 TweenMax를 사용하여 CSS 속성을 제어하는 간단한 예제입니다:

1. TweenMax 설치:

먼저 TweenMax를 설치해야 합니다. 프로젝트에 TweenMax를 직접 사용할 수도 있고, npm을 통해 설치할 수도 있습니다. 예를 들어, npm을 사용한다면 다음과 같이 설치합니다:

npm install gsap

1. TweenMax를 사용하여 CSS 속성 제어:

// 필요한 모듈 가져오기
import { TweenMax } from 'gsap';

// 제어할 요소 선택
const element = document.querySelector('.my-element');

// TweenMax를 사용하여 CSS 속성 제어
TweenMax.to(element, 1, {
  opacity: 0.5, // 투명도 설정
  x: 200, // x축 이동
  y: 100, // y축 이동
  rotation: 180, // 회전
  scale: 2 // 크기 조정
});

위의 예제에서는 TweenMax의 to 메소드를 사용하여 요소의 투명도(opacity), 이동(x, y), 회전(rotation), 크기(scale) 등의 CSS 속성을 제어하고 있습니다.

to 메소드는 첫 번째 매개변수로 제어할 요소를 받으며, 두 번째 매개변수로 제어할 속성들과 속성값을 설정하는 객체를 전달합니다.

위의 예제에서는 element 변수를 통해 제어할 요소를 선택하고, TweenMax.to를 통해 원하는 CSS 속성과 값을 설정하면 TweenMax가 애니메이션을 자동으로 처리해 줍니다.

TweenMax는 세세한 제어와 다양한 애니메이션 효과를 제공하므로, API 문서를 참조하여 원하는 속성과 메소드를 활용할 수 있습니다.

자세한 정보와 예제는 GSAP(Docs)를 참조하십시오.