gsap.set 반응형

gsap.set()은 초기 상태를 명확히 설정하여

애니메이션이 항상 예상한 위치와 스타일에서 시작되도록 보장해줍니다.

✅ 1. 즉시 설정 (No animation)

gsap.set()은 애니메이션 없이 즉시 값을 적용합니다.

예: 초기 상태 설정 시 매우 유용.

gsap.set(".box", { opacity: 0, y: 50 });

✅ 2. 퍼포먼스 최적화

element.style이나 jQuery보다 빠르게 동작하는 경우도 많음.

✅ 3. GSAP 생태계와 연계 쉬움

나중에 gsap.to()로 애니메이션을 만들 때, 초기값을 일관되게 설정 가능.

ScrollTrigger와 같이 연동할 때도 좋음.

gsap.set(".box", { scale: 0 });
gsap.to(".box", { scale: 1, duration: 1 });

✅ 4. CSS뿐 아니라 transform 등 복잡한 속성도 쉽게 설정

transform 관련 속성 (x, y, scale, rotate) 등은 CSS에서 설정하면 문자열 파싱이 필요하지만,
gsap.set()은 숫자 기반으로 깔끔하게 다룸.

gsap.set(".box", { x: 100, rotate: 45 });

✅ 5. 배열, 반복 요소 설정도 간편

gsap.set(".items", { opacity: 0 });  // 여러 요소 한 번에 설정 가능

✅ 6. 단독으로도 사용, 타임라인 안에서도 사용 가능

let tl = gsap.timeline();
tl.set(".box", { x: 0 })     // 초기 설정
  .to(".box", { x: 300 });   // 애니메이션

이처럼 반응형 환경에서 초기 상태를 화면 크기별로 분리에 용의.
불필요한 시각적 깜빡임이나 스타일 오류를 방지.
사용자 경험을 부드럽고 일관되게 유지.

이 코드는 반응형 애니메이션에서 초기 상태를 관리하기 위한 가장 좋은 방법 중 하나로 사용되었습니다.