[GSAP] GSAP 4 / GSAP ease

ease

• 애니메이션에서 속도의 변화를 조절하는 속성
• 단순히 시작과 끝을 선형으로 움직이는 것보다는, 더 자연스럽거나 역동적인 움직임을 만들기 위해 사용
  • 선형(linear): 일정한 속도로 움직임
  • 이징(ease): 속도를 변화시켜 가속, 감속, 탄력 등을 표현

// [문법]
gsap.to(target, { ease: "속성" });

---

주요 ease 종류

Linear / None

• 속도가 일정하게 유지되는 기본 형태
• 특징: 가속이나 감속 없음, 꾸준히 움직임

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

---

power 계열

• 가장 많이 사용되는 기본 ease.
• 숫자가 클수록 가속/감속이 더 강함.

종류	설명	특징
power1	약간의 가속/감속	부드럽게 시작하거나 끝날 때
power2	중간 정도	흔히 애니메이션에서 자연스러운 움직임
power3	강함	빠른 가속/감속 필요 시
power4	매우 강함	극적인 움직임 연출

옵션 접미사

옵션	설명
.in	시작 느리고 중간 가속
.out	시작 빠르고 끝 느림
.inOut	시작과 끝 느리고 중간 빠름

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

---

Back

 

• 살짝 반대로 이동했다가 목표 위치로 도착
• 뒤로 살짝 밀린 후 앞으로 튕기는 느낌

옵션

옵션	설명
back.in	시작에서 뒤로 이동
back.out	끝에서 뒤로 튕기고 도착
back.inOut	시작과 끝 모두 튕김

 

// 숫자 1.7 → 튕김 강도
gsap.to(".box", { x: 300, duration: 2, ease: "back.out(1.7)" });

---

Elastic

• 스프링처럼 진동하며 도착
• 특징: 탄력감 있는 애니메이션, 튕기면서 멈춤

옵션

옵션	설명	특징 / 느낌
elastic.in	시작할 때 진동하며 출발	처음 느리게 출발하면서 튕기며 가속
elastic.out	끝에서 튕기며 멈춤	목표 지점 근처에서 스프링처럼 튕기며 멈춤
elastic.inOut	시작과 끝에서 진동하며 이동	출발과 도착 모두 스프링처럼 튕기며 자연스러운 흐름

파리미터

• amplitude : 진폭 (움직임의 튕김 강도)
  • 값이 클수록 목표 지점 근처에서 더 많이 튕김
  • 기본값: 1
  • amplitude ↑ → 튀는 높이 ↑
• period : 주기 (진동 속도/간격)
  • 값이 작을수록 진동 횟수가 많고 빠르게 튕김
  • 값이 클수록 느리게 긴 진동
  • period ↑ → 진동 간격 ↑, 느리게 움직임

---

Bounce

• 바닥에 튀는 느낌, 실제 공 튀는 것처럼
• 특징: 물리적인 충돌 느낌

옵션	설명	특징
bounce.in	시작할 때 바닥에 튀듯 출발	시작점에서 바운스하며 천천히 가속
bounce.out	끝날 때 바닥에 튀듯 멈춤	목표 지점에 도달할 때 튕기면서 멈춤
bounce.inOut	시작과 끝에서 튀듯 이동	출발과 도착 모두 바운스, 중간은 자연스럽게 이동

---

SlowMo

• 천천히 시작 → 빠르게 이동 → 천천히 끝
• 특징: 드라마틱하거나 느린 동작 강조에 사용

파라미터: (linearRatio, power, yoyoMode)

 

• linearRatio : 전체 애니메이션에서 일정 속도로 이동하는 구간 비율
  • 0 ~ 1 사이 값
  • 0 → 일정 구간 없음 (처음과 끝만 느림)
  • 1 → 전체 구간이 선형 (속도 변화 없음)
• power : 느린 구간에서 가속/감속 정도
  • 0 ~ 1 사이 값
  • 0 → 거의 변하지 않고 일정 속도에 가까움
  • 1 → 느린 구간에서 극적으로 가속/감속
• yoyoMode : 느린 구간에서 뒤로 튕길지 여부
  • true → 느린 구간에서 살짝 역방향 움직임
  • false → 역방향 없음, 자연스럽게 이동