[GSAP] GSAP 3 / GSAP 기본 애니메이션 문법

GSAP 기본 구문

•  애니메이션에 대한 정보를 포함하는 메서드, 타겟, 그리고 vars 객체를 가지고 있음

대상

• GSAP에 무엇을 애니메이션으로 만들고 대상
• document.querySelectorAll(), HTML 또는 SVG 대상의 경우 다음과 같은 선택자 사용 가능
• ".class" 그리고. "#id". 또는 변수나 배열을 전달할 수도 있음

// use a class or ID
gsap.to(".box", { x: 200 });

// a complex CSS selector
gsap.to("section > .box", { x: 200 });

// a variable
let box = document.querySelector(".box");
gsap.to(box, { x: 200 })

// or even an Array of elements
let square = document.querySelector(".square");
let circle = document.querySelector(".circle");
                                      
gsap.to([square, circle], { x: 200 })

---

변수

• vars 객체에는 애니메이션에 대한 모든 정보가 포함되어 있음
• 애니메이션을 만들고자 하는 임의의 속성일 수도 있고, 애니메이션의 동작에 영향을 미치는 특수 속성일 수도 있음
• duration, onComplete 또는 repeat....

gsap.to(target, {
  // this is the vars object
  // it contains properties to animate
  x: 200,
  rotation: 360,
  // and special properties
  duration: 2
})

---

GSAP 기본 애니메이션 함수

1. gsap.to()

• 대상 요소를 현재 상태에서 특정 목표 상태로 애니메이션 시키는 함수
• "지금 위치에서 → 목표 값으로 이동”
• to()는 현재 상태에서 목표 상태로 자연스럽게 이동.
• CSS transform, opacity, color 등 거의 모든 CSS 속성 애니메이션 가능.

// [문법]
gsap.to(target, vars);

 

• target : 애니메이션할 요소 (CSS 선택자, DOM 노드, NodeList, 배열)
• vars : 애니메이션 옵션 객체
  • duration: 애니메이션 시간 (초)
  • CSS 속성: x, y, opacity, scale, rotation 등
  • ease: 속도 곡선 (linear, power1.inOut, bounce 등)
  • delay: 시작 지연 시간 (초)
  • repeat: 반복 횟수 (-1이면 무한 반복)
  • yoyo: 반복 시 반대로 재생 여부

 

gsap.to(".box", {
  duration: 2,  // 2초
  x: 200,       // x축 이동
  opacity: 0.5, // 투명도 변경
  rotation: 45, // 45도 회전
  ease: "power1.out",
  delay: 0.5    // 0.5초 후 시작
});

---

2. gsap.from()

• gsap.from()은 는 시작 상태를 지정하고, 현재 상태로 자연스럽게 애니메이션을 만듦
• 요소가 지정한 시작 위치/속성 → 현재 CSS 상태로 애니메이션
• from()은 보통 요소 등장 효과에 많이 사용

gsap.from(target, vars);

// 현재 x축이 0이라면, -300에서 시작하여 천천히 현재위치인 0으로 이동
gsap.from(".box", {
  duration: 1,
  x: -300,  // 시작 위치
  opacity: 0 // 시작 투명도
});

---

3. gsap.fromTo()

• fromTo()는 시작 상태와 끝 상태를 모두 지정하고 싶을 때 사용.
• from()과 to()의 장점을 동시에 가질 수 있음.
• "시작 상태 → 끝 상태"를 명확히 지정하고 싶을 때 사용.

// [문법]
gsap.fromTo(target, fromVars, toVars);

 

// 왼쪽(-200px)에서 시작해 1초 동안 원래 위치(x=0)로 이동하면서 
// 투명도 0 → 1로 나타나는 애니메이션.

gsap.fromTo(".box",
  { x: -200, opacity: 0 }, // 시작 상태
  { x: 0, opacity: 1, duration: 1, ease: "power2.out" } // 끝 상태
);

---

4. gsap.set()

• 초기 상태 세팅, 조건에 따라 스타일 바로 적용할 때 유용
• gsap.set()은 즉시 스타일 적용
• 애니메이션은 없음
• 여러개 속성에 동시에 설정 가능
• css를 미리 설정할 수 있지만 페이지 로딩 후 바로 보여야 하는 애니메이션의 경우 gsap보다 css에서 직접 설정하는 것이 좋음(파일을 불러오고 애니메이션이 시작되기 때문에 gsap.set설정하기 전 css가 보일 수 있음)

// [문법]
gsap.set(target, vars);

gsap.set(".box", {
  x: 100,
  opacity: 0.5,
  rotation: 30
});

---

5. gsap.delayedCall()

• 지연 후 함수 실행
• setTimeout과 유사하지만 GSAP 타임라인과 연동 가능
• 애니메이션과 동기화할 때 유용

// [문법]
gsap.delayedCall(지연시간, 실행할함수, [함수매개변수], [this범위]);

 

매개변수	설명	예
지연시간 (delay)	함수 실행 전 대기 시간 (초)	2
실행할함수 (callback)	지연 후 실행할 함수	() => console.log("실행")
함수매개변수 (params)	함수에 전달할 매개변수 (선택)	["안녕", 123]
this범위 (scope)	함수 내부에서 this로 참조할 객체 (선택)	this

gsap.delayedCall(2, () => {
  console.log("2초 후 실행");
});

function greet(msg) {
	console.log(msg);

}
gsap.delayedCall(4, greet, ['hi']);

 

---

6. gsap.timeline()

• GSAP에서 여러 애니메이션을 순차적·동시적으로 연결할 때 핵심이 되는 기능
• timeline은 여러 애니메이션을 하나로 묶어 관리할 수 있어
  • 순차 실행
  • 동시에 실행
  • 반복, 지연, easing 적용 등 통합 제어 가능
• 결과적으로 애니메이션 구조를 시각적으로 관리하기 좋음

const 타임라인 = gsap.timeline({ defaults: { 기본옵션 } });

타임라인.애니메이션메서드(대상, 옵션, 위치)
         .애니메이션메서드(대상, 옵션, 위치)
         ... ;

사용방법

1. 타임라인 생성

• 타임라인 내 모든 애니메이션에 공통 옵션 적용 가능

const 타임라인 = gsap.timeline({ defaults: { duration, ease, repeat 등 } });

2. 애니메이션 메서드

• .to() : 목표 상태로 애니메이션
• .from() : 시작 상태에서 현재 상태로 애니메이션
• .fromTo() : 시작/끝 상태 모두 지정
• .set() : 애니메이션 없이 바로 값 적용
• .call() : 타임라인 중 특정 시점에 함수 실행

3. 위치(position) 지정 (선택적)

• < : 이전 애니메이션과 동시에 시작
• > : 이전 애니메이션 끝난 뒤 시작 (기본값)
• 숫자 : 타임라인 내 특정 시간(초)에서 시작

const tl = gsap.timeline({ defaults: { duration: 1 } });

tl.to(".box1", { x: 100 })       // 0초부터 시작
  .to(".box2", { y: 50 }, "<")   // 동시에 시작
  .from(".box3", { opacity: 0 }); // 순차적으로 실행