스킬 자체의 표현으로
gsap-core는 GSAP 핵심 엔진의 진입 스킬로, gsap.to(), gsap.from(), gsap.fromTo(), gsap.set()를 사용하는 단일 트윈과 duration(기본값 0.5), delay, ease(기본값 power1.out), stagger, overwrite, immediateRender 같은 일반적인 vars를 다룹니다. 이 문서는 GSAP의 트랜스폼 별칭(x, y, scale, rotation, xPercent), 페이드용 autoAlpha, clearProps, 함수 기반 및 상대 값, 그리고 프로젝트 전역의 gsap.defaults()를 설명합니다.
큰 섹션에서는 반응형 브레이크포인트를 위한 gsap.matchMedia()와 prefers-reduced-motion을 다루며, 공식 모범 사례 목록과 Do Not 섹션으로 마무리됩니다. React, Vue, Svelte 또는 순수 JS에서 GSAP 애니메이션을 작성하거나 검토하는 디자이너와 개발자를 위해 작성되었습니다.
산출물
- 핵심 엔진 안에 포함되어 별도의 플러그인이 필요 없는 CSSPlugin을 통해 애니메이션되는 DOM 엘리먼트.
- 모든 tween 메서드가 반환하는 Tween 인스턴스로, 일시정지, 재생, 역방향 재생, kill 또는 스크러빙이 필요할 때 저장해 둡니다.
- 별칭으로 작성되어 고정된 순서(translation, scale, rotationX/Y, skew, rotation)로 적용되는 transform입니다.
- matchMedia 핸들러 내부에서 생성되는 애니메이션과 ScrollTrigger로, 쿼리가 더 이상 매칭되지 않으면 자동으로 되돌려집니다.
작동 방식
- 01Tween 메서드 선택
gsap.to()는 현재 상태에서 전달한 vars로 애니메이션하며 가장 흔하게 사용되는 호출입니다. from()은 진입 애니메이션을 위해 이를 반대로 적용하고, fromTo()는 현재 값을 읽지 않고 양쪽 끝을 모두 명시적으로 지정하며, set()은 duration 0으로 즉시 적용합니다.
- 02vars는 camelCase로 작성
vars 객체 내부의 속성 이름은 camelCase여야 하므로, background-color나 font-size 같은 CSS 속성은 backgroundColor, fontSize가 됩니다.
- 03Stagger로 오프셋 지정
stagger에 일반 숫자를 지정하면 각 대상 간의 간격(초)이 되며, 객체 형태를 사용하면 from 방향을 가진 amount나 from: "random"을 사용하는 each 같은 옵션을 추가할 수 있습니다.
- 04Ease 선택
문자열 ease가 대부분의 경우를 다룹니다 — power1.out이 기본적인 느낌이며, back.out(1.7), elastic.out(1, 0.3), power3.inOut, none이 문서에 명시된 대안입니다.
- 05대상별 값 계산
vars 값으로 전달된 함수는 첫 렌더링 시 각 대상에 대해 한 번씩 호출되므로, x: (i) => i * 50과 같은 인덱스 기반 값을 세트 전체에 분산시킬 수 있습니다.
- 06미디어 쿼리 범위로 작업 제한
gsap.matchMedia()는 쿼리가 매칭되는 동안에만 설정 핸들러를 실행하며, 이는 이 스킬이 반응형 브레이크포인트와 reduced-motion 사용자를 처리하는 방식입니다.