GSAP (GreenSock Animation Platform)

GSAP (GreenSock Animation Platform) – 개요 & 3가지 주요 개념

GSAP은 강력한 애니메이션 라이브러리로, HTML, CSS, SVG, WebGL, Three.js 등 다양한 요소에 애니메이션을 적용할 수 있습니다.

3가지 주요 개념

1. 기본 애니메이션 (gsap.to(), gsap.from(), gsap.fromTo())
2. 타임라인 애니메이션 (gsap.timeline())
3. 스크롤 애니메이션 (ScrollTrigger, ScrollToPlugin)

---

기본 애니메이션 – gsap.to(), gsap.from(), gsap.fromTo()

 

1. gsap.to() – 특정 속성으로 변화

요소의 속성을 지정된 값으로 애니메이션

gsap.to(".box", { x: 300, duration: 2 });

 

• .box 요소를 x: 300px까지 2초 동안 이동.
• 기본적으로 ease가 적용되어 부드러운 애니메이션.

여러 속성 동시에 적용

gsap.to(".box", { x: 300, y: 200, rotation: 360, scale: 1.5, duration: 2 });

• x, y → 위치 이동
• rotation → 회전
• scale → 크기 확대

반복 & 딜레이 설정

gsap.to(".box", { x: 300, duration: 2, repeat: -1, yoyo: true });

• repeat: -1 → 무한 반복.
• yoyo: true → 애니메이션을 다시 원래 위치로 돌아가도록 설정.

---

2. gsap.from() – 특정 속성에서 시작

애니메이션을 특정 값에서 시작

gsap.from(".box", { opacity: 0, scale: 0.5, duration: 1 });

• 처음에 투명(opacity: 0) & 크기(scale: 0.5)에서 시작하여 원래 크기로 변화.

애니메이션 순서 조정

gsap.from(".box", { x: -500, duration: 2 });

• 왼쪽(-500px)에서 등장하는 애니메이션.

---

3. gsap.fromTo() – 특정 속성에서 특정 속성으로 변화

시작 값과 종료 값을 모두 지정

gsap.fromTo(".box", { opacity: 0, y: -100 }, { opacity: 1, y: 0, duration: 2 });

• opacity: 0 → 1, y: -100 → 0으로 변화.

애니메이션 옵션 추가

gsap.fromTo(".box", { scale: 0 }, { scale: 1, duration: 1, ease: "bounce.out" });

• ease: "bounce.out" → 부드러운 바운스 효과.

---

추가 기능

콜백 함수 사용

gsap.to(".box", {
  x: 300,
  duration: 2,
  onComplete: () => console.log("애니메이션 완료!"),
});

• 애니메이션이 끝난 후 특정 동작 실행 가능.

여러 요소 동시에 애니메이션

gsap.to([".box1", ".box2"], { x: 300, duration: 2 });

• .box1과 .box2가 동시에 이동.

---

gsap.timeline() (타임라인 애니메이션)

GSAP의 timeline() 기능은 여러 애니메이션을 순차적으로 실행할 때 사용
이를 활용하면 애니메이션 간의 자연스러운 흐름을 조정하고, 여러 개의 애니메이션을 체인처럼 연결

1. 기본적인 gsap.timeline() 사용법

연속적인 애니메이션을 실행

const tl = gsap.timeline();

tl.to(".box", { x: 100, duration: 1 })  // 첫 번째 애니메이션
  .to(".box", { y: 100, duration: 1 })  // 두 번째 애니메이션
  .to(".box", { rotation: 360, duration: 1 }); // 세 번째 애니메이션

• .box가 → 오른쪽 이동 → 아래로 이동 → 회전하는 애니메이션을 순서대로 실행.

---

2. delay, stagger, repeat 등 다양한 설정

각 애니메이션 간 간격 추가

const tl = gsap.timeline();

tl.to(".box", { x: 100, duration: 1 })
  .to(".box", { y: 100, duration: 1, delay: 0.5 }) // 0.5초 대기 후 실행
  .to(".box", { rotation: 360, duration: 1 });

여러 요소를 동시에 순차적으로 실행 (stagger)

tl.to(".box", { x: 100, duration: 1, stagger: 0.2 });

• .box 여러 개가 0.2초 간격으로 순차적으로 실행.

애니메이션 반복 (repeat)

const tl = gsap.timeline({ repeat: -1, yoyo: true });

• repeat: -1 → 무한 반복.
• yoyo: true → 다시 원래 상태로 돌아감.

---

3. position을 활용한 애니메이션 타이밍 제어

GSAP에서는 기본적으로 애니메이션이 순차적으로 실행되지만, position 값을 사용하면 더 정교한 타이밍을 설정

즉시 동시에 실행

tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { y: 100, duration: 1 }, "-=1"); // 이전 애니메이션과 동시에 실행

• .box2의 애니메이션이 .box1과 동시에 실행.

특정 시간 후 실행

tl.to(".box1", { x: 100, duration: 1 })
  .to(".box2", { y: 100, duration: 1 }, "+=1"); // 1초 후 실행

• .box2가 .box1 애니메이션이 끝난 후 1초 후 실행.

---

4. onComplete 및 이벤트 추가

애니메이션이 끝난 후 실행할 함수 설정

tl.to(".box", { x: 100, duration: 1, onComplete: () => console.log("끝났다!") });

• 애니메이션이 끝나면 console.log("끝났다!") 실행.

---

5. gsap.timeline()을 활용한 복잡한 애니메이션 예제

버튼 클릭 시 애니메이션 실행

const tl = gsap.timeline({ paused: true }); // 처음에는 실행되지 않음

tl.to(".box", { x: 100, duration: 1 })
  .to(".box", { y: 100, duration: 1 })
  .to(".box", { rotation: 360, duration: 1 });

document.querySelector("button").addEventListener("click", () => tl.play());

설명

• 처음에는 paused: true로 애니메이션을 멈춤.
• 버튼을 클릭하면 .play()를 호출하여 애니메이션 실행.

---

GSAP – ScrollTrigger (스크롤 애니메이션)

GSAP의 ScrollTrigger는 사용자의 스크롤 위치에 따라 애니메이션을 실행하는 플러그인
웹사이트에서 요소가 화면에 나타날 때 애니메이션을 실행하거나, 스크롤에 따라 변화하는 효과를 만들 때 사용

• 스크롤하면 텍스트가 등장
• 스크롤 위치에 따라 요소가 회전
• 고정된 스크롤 애니메이션 (Parallax 효과)
• 스크롤 도달 시 특정 효과 실행
• 스크롤에 따라 비디오나 3D 객체 조작 (Three.js 등과 함께 사용)

---

1. ScrollTrigger 기본 사용법

스크롤이 트리거되면 애니메이션 실행

gsap.to(".box", {
  x: 300,
  duration: 2,
  scrollTrigger: {
    trigger: ".box", // 애니메이션을 트리거할 요소
    start: "top 80%", // 언제 시작할지 (요소의 상단이 뷰포트 80% 지점에 닿을 때)
    end: "top 30%", // 언제 끝날지 (요소의 상단이 뷰포트 30% 지점에 닿을 때)
    scrub: true, // 부드러운 스크롤 연동 (값이 클수록 천천히 반응)
    markers: true, // 개발용 가이드 표시 (start, end 위치)
  }
});

• trigger: ".box" → .box가 화면에 나타날 때 애니메이션 실행.
• start: "top 80%" → .box의 상단이 뷰포트의 80% 지점에 닿으면 시작.
• end: "top 30%" → .box의 상단이 30% 지점에 도달하면 종료.
• scrub: true → 스크롤 위치에 따라 애니메이션이 연동됨.
• markers: true → 애니메이션 트리거 위치를 시각적으로 표시 (개발용).

---

2. scrub을 활용한 부드러운 스크롤 애니메이션

스크롤에 따라 부드럽게 값이 변경되는 효과

gsap.to(".box", {
  rotation: 360,
  scrollTrigger: {
    trigger: ".box",
    start: "top 50%",
    end: "bottom 20%",
    scrub: 1 // 스크롤 속도와 애니메이션이 동기화됨
  }
});

• scrub: 1 → 스크롤 속도에 따라 애니메이션이 조절됨.
• scrub: true → 더 자연스럽게 동기화됨.

---

3. 고정된 패럴랙스(Parallax) 효과

스크롤할 때 배경이 더 천천히 움직이는 효과

gsap.to(".background", {
  y: -100, // 위로 이동
  scrollTrigger: {
    trigger: ".background",
    start: "top bottom",
    end: "bottom top",
    scrub: true
  }
});

설명

• 배경 이미지가 스크롤보다 느리게 움직이며 패럴랙스 효과를 연출.

---

4. 스크롤 도달 시 특정 효과 실행

요소가 화면에 나타날 때 실행

gsap.from(".text", {
  opacity: 0,
  y: 50,
  duration: 1,
  scrollTrigger: {
    trigger: ".text",
    start: "top 90%",
    toggleActions: "play none none reverse"
  }
});

• toggleActions: "play none none reverse"
  • play → 스크롤 도달 시 애니메이션 실행
  • none → 다시 스크롤해도 재시작하지 않음
  • reverse → 스크롤을 되돌리면 원래 위치로 복귀

---

5. pin을 활용한 고정 애니메이션

스크롤할 때 특정 요소가 고정됨

gsap.to(".box", {
  scale: 1.5,
  scrollTrigger: {
    trigger: ".box",
    start: "top center",
    pin: true, // 스크롤 중 요소를 고정
    scrub: true
  }
});

• pin: true → 스크롤할 때 .box가 고정됨.
• 요소가 일정 지점에서 멈춘 후, 스크롤을 계속하면 다시 움직임.

---

6. ScrollTrigger와 gsap.timeline() 함께 사용

연속적인 스크롤 애니메이션

const tl = gsap.timeline({
  scrollTrigger: {
    trigger: ".container",
    start: "top top",
    end: "bottom top",
    scrub: true,
    pin: true
  }
});

tl.to(".box1", { x: 200, duration: 1 })
  .to(".box2", { x: -200, duration: 1 })
  .to(".box3", { y: 100, duration: 1 });

• .box1, .box2, .box3가 순차적으로 애니메이션 실행.
• pin: true → 컨테이너가 스크롤 중 고정됨.

---

7. ScrollTrigger.refresh() 활용 (레이아웃 변경 대응)

📌 레이아웃이 변경될 때 ScrollTrigger를 갱신

window.addEventListener("resize", () => {
  ScrollTrigger.refresh();
});

• 화면 크기가 변경되면 스크롤 위치를 다시 계산하여 애니메이션이 올바르게 동작.

---

추가적으로 알아야 할 것들

1️⃣ Easing	애니메이션의 속도를 부드럽게 제어	"power1.out", "bounce"
2️⃣ Stagger	여러 요소에 순차적인 애니메이션 적용	stagger: 0.2
3️⃣ GSAP Plugins	TextPlugin, MotionPath, ScrollSmoother 등 다양한 플러그인 활용	gsap.registerPlugin(TextPlugin)
4️⃣ Advanced ScrollTrigger	고급 스크롤 효과, 스크롤 속도 제어, 반응형 설정	scrollerProxy, matchMedia()

---

1️⃣ Easing (부드러운 애니메이션 속도 제어)

GSAP에서 Easing(이징) 은 애니메이션이 시작하고 끝날 때 속도를 어떻게 조절할지를 결정합니다.
즉, 부드러운 가속/감속을 추가하여 자연스러운 움직임을 구현하는 데 필수입니다.

Easing 기본 사용법

gsap.to(".box", { x: 300, duration: 2, ease: "power1.out" });

대표적인 Easing 옵션

"power1.out"	부드럽게 감속
"power4.out"	더 빠르게 감속
"bounce.out"	튕기는 효과
"elastic.out"	고무줄처럼 늘어났다 돌아옴
"back.out(2)"	시작할 때 뒤로 갔다가 앞으로 이동

여러 개의 요소를 다른 이징 효과로 적용

gsap.to(".box1", { x: 300, duration: 1, ease: "bounce.out" });
gsap.to(".box2", { x: 300, duration: 1, ease: "elastic.out(1, 0.3)" });

---

2️⃣ Stagger (여러 요소에 순차적인 애니메이션 적용)

GSAP에서 여러 요소를 한 번에 애니메이션할 때 stagger 옵션을 사용하면 순차적으로 실행할 수 있습니다.

stagger 기본 사용법

gsap.to(".box", { y: 100, duration: 1, stagger: 0.2 });

.box 여러 개가 0.2초 간격으로 순차적으로 이동.

stagger의 다양한 활용

gsap.to(".box", { 
  y: 100, 
  duration: 1, 
  stagger: {
    amount: 1, // 전체 애니메이션 시간
    from: "center" // 중앙부터 실행
  }
});

애니메이션이 중앙에서 시작하고 양쪽으로 퍼짐.

그리드 형태의 요소에 stagger 적용

gsap.to(".box", { 
  scale: 1.2, 
  duration: 1, 
  stagger: { grid: [3, 3], from: "edges", amount: 1 }
});

그리드 배열 요소에 순차적으로 애니메이션 적용 가능.

---

3️⃣ GSAP 플러그인 활용 (추가 기능)

플러그인 등록 방법

gsap.registerPlugin(TextPlugin, MotionPathPlugin);

1. TextPlugin (텍스트 애니메이션)

텍스트가 타이핑되듯이 출력

gsap.to(".text", { text: "Hello GSAP!", duration: 2 });

2. MotionPathPlugin (경로 애니메이션)

객체가 특정 경로를 따라 움직이도록 설정

gsap.to(".box", {
  motionPath: { path: [{ x: 100, y: 50 }, { x: 200, y: 200 }] },
  duration: 2
});

3. ScrollSmoother (부드러운 스크롤 효과)

웹사이트 전체의 스크롤을 부드럽게

gsap.registerPlugin(ScrollSmoother);

ScrollSmoother.create({
  smooth: 2, // 스크롤 부드러움 정도
  effects: true
});

 

---

4️⃣ Advanced ScrollTrigger (고급 스크롤 효과)

기본 ScrollTrigger를 마스터했다면, 고급 기능도 알아두면 좋습니다.

1. scrollerProxy() (사용자 정의 스크롤 적용)

커스텀 스크롤 라이브러리와 ScrollTrigger 연결

ScrollTrigger.scrollerProxy(".custom-scroll-container", {
  scrollTop(value) { return value !== undefined ? customScroll.scrollTo(value) : customScroll.scrollTop; },
  getBoundingClientRect() { return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }; }
});

Locomotive Scroll, Smooth Scroll 같은 외부 라이브러리와 연결 가능.

---

2. matchMedia() (반응형 애니메이션)

반응형 웹에서 특정 브레이크포인트마다 다른 애니메이션 실행

gsap.matchMedia().add("(max-width: 768px)", () => {
  gsap.to(".box", { x: 100, duration: 1 });
});

화면 크기가 768px 이하일 때만 특정 애니메이션 실행 가능.