목차
GSAP 시작하기
순수 웹 기술인 웹 애니메이션 API를 사용하는 대신, 강력한 애니메이션 라이브러리를 사용할 수 있다. GSAP(GreenSock Animation Platform)은 애니메이션 라이브러리 중 하나다. 여러 라이브러리가 있지만, 이번 수업에서는 GSAP 라이브러리를 학습한다.
GSAP을 사용하기 위해서는 HTML 파일에 라이브러리를 추가해야 한다.
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
GSAP을 이용하여 적용한 싱글 애니메이션을 트윈(Tween)이라고 한다. 트윈 애니메이션에 대한 정보를 포함하는 메서드(method)가 대상(target)과 변수(vars) 객체를 매개변수로 받는다.
gsap.메서드(대상, 변수객체)
메서드(Method)
트윈 애니메이션은 네 가지 유형의 메서드를 제공한다.
- gsap.to(): 현재 상태에서 트윈에 지정한 값까지 애니메이션
- gsap.from(): 지정한 값에서 현재 상태까지 애니메이션(to의 역방향)
- gsap.fromTo(): 시작값과 종료값을 모두 지정하여 애니메이션
- gsap.set(): 애니메이션 없이 속성을 즉시 설정(지속 시간 0의 to와 동일)
타겟(Target(s))
GSAP에 애니메이션을 적용할 대상을 알려준다. CSS 선택자, HTML 요소, JavaScript 배열 등을 전달할 수 있다. GSAP은 내부적으로 document.querySelector()를 사용한다.
// 대상으로 class 또는 id 선택자 지정
gsap.to('.box', { x: 200 })
// 대상으로 복잡한 CSS 선택자 지정
gsap.to('section > .box', { x: 200 })
// 변수(HTML 요소 객체)
const box = document.querySelector(".box")
gsap.to(box, { x: 200 })
// 배열(HTML 요소들로 구성)
const square = document.querySelector('.square')
const circle = document.querySelector('.circle')
gsap.to([square, circle], { x: 200 })
변수(Vars)
변수 객체는 애니메이션에 관한 모든 정보를 담고 있다. 애니메이션을 적용할 임의의 속성이나 애니메이션 동작에 영향을 주는 특별한 속성(예: duration, onComplete, repeat 등)을 설정할 수 있다.
gsap.to(
target,
// vars 객체 (애니메이션 속성 포함)
{
x: 200,
rotation: 360,
duration: 2,
}
)
애니메이션 가능한 속성
GSAP는 거의 모든 것을 애니메이션할 수 있으며, 미리 정해진 목록이 없다. CSS 속성, 커스텀 객체 속성, 심지어 CSS 변수와 복잡한 문자열까지 포함된다. 가장 일반적으로 애니메이션되는 속성은 트랜스폼(Transforms)과 오퍼시티(opacity)다.
GSAP은 트랜스폼에 대한 축약형을 제공한다.
| GSAP | 설명 또는 동등한 CSS |
| x: 100 | transform: translateX(100px) |
| y: 100 | transform: translateY(100px) |
| xPercent: 50 | transform: translateX(50%) |
| yPercent: 50 | transform: translateY(50%) |
| scale: 2 | transform: scale(2) |
| scaleX: 2 | transform: scaleX(2) |
| scaleY: 2 | transform: scaleY(2) |
| rotation: 90 | transform: rotate(90deg) |
| rotation: "1.25rad" | 라디안 사용 - CSS 대안 없음 |
| skew: 30 | transform: skew(30deg) |
| skewX: 30 | transform: skewX(30deg) |
| skewY: "1.23rad" | 라디안 사용 - CSS 대안 없음 |
| transformOrigin: "center 40%" | transform-origin: center 40% |
| opacity: 0 | 요소의 투명도 조정 |
| autoAlpha: 0 | opacity & visibility의 축약형 |
| duration: 1 | animation-duration: 1s |
| repeat: -1 | animation-iteration-count: infinite |
| repeat: 2 | animation-iteration-count: 2 |
| delay: 2 | animation-delay: 2 |
| yoyo: true | animation-direction: alternate |
기본적으로 GSAP은 트랜스폼에 px과 각도(degrees)를 사용하지만, vw, 라디안(radians) 또는 자체 JavaScript 계산이나 상대 값을 사용할 수도 있다.
x: 200, // 기본값으로 px 사용
x: "+=200" // 상대 값
x: '40vw', // 또는 GSAP이 해석할 다른 단위가 포함된 문자열 전달
x: () => window.innerWidth / 2, // 계산을 위한 함수 값도 사용 가능
rotation: 360 // 기본값인 도(degrees) 사용
rotation: "1.25rad" // 라디안 사용
GSAP 이징(Easing)
내부적으로 이징은 트윈되는 동안 변화율을 제어하는 수학적 계산이다. GSAP 홈페이지에서 Easing Visualizer를 제공한다.
대부분의 이징에는 세 가지(in, out 및 inOut) 유형이 있다. 이징 유형은 이징 과정 동안의 모멘텀(momentum, 탄력 또는 가속도)을 제어한다. 그중 'power1.out' 이징 아웃 애니메이션은 UI 전환에 가장 적합하다.
GSAP 스태거(Stagger)
트윈에 여러 대상이 있는 경우, 각 애니메이션 시작 사이에 쉽게 지연 시간을 추가할 수 있다. stagger: 0.1 값은 각 트윈의 시작 시간 사이에 0.1초의 간격을 두게 한다.
gsap.to('.box', {
y: 100,
stagger: 0.1 // 각 ".box" 요소가 애니메이션을 시작할 때 사이의 0.1초 지연
})
stagger 옵션 값으로 다음과 같은 객체를 설정하면 더 다양하게 제어할 수 있다.
gsap.to('.box', {
y: 100,
// 스태거 고급 옵션
stagger: {
each: 0.1,
from: 'center',
grid: 'auto',
ease: 'power2.inOut',
repeat: -1 // 다른 스태거 애니메이션이 끝날 때까지 기다리지 않고 즉시 반복
}
})
GSAP 타임라인(Timeline)
애니메이션의 순서와 타이밍을 더 세밀하게 제어하기 위해 타임라인(timeline)을 사용할 수 있다. 타임라인은 쉽게 조정할 수 있고 탄력적인 애니메이션 시퀀스를 만든다. 타임라인에 트윈을 추가하면 기본적으로 추가된 순서대로 하나씩 차례로 재생된다.
timeline은 위치 매개변수를 받는다.
// 타임라인 생성
const tl = gsap.timeline()
// 트윈을 타임라인에 추가
// gsap.to()가 아닌, tl.to()를 사용
// 타임라인에서 정확히 1초 지점에서 시작 (절대적)
tl.to('.green', { x: 600, duration: 2 }, 1)
// 이전 애니메이션의 시작 부분에 삽입
tl.to('.purple', { x: 600, duration: 1 }, '<')
// 타임라인 끝에서 1초 후에 삽입 (간격, 상대적)
tl.to('.orange', { x: 600, duration: 1 }, '+=1')
타임라인은 트윈이 가진 대부분의 특별 속성(repeat, delay 등)을 공유하여 전체 애니메이션 시퀀스를 하나의 단위로 제어할 수 있다. 또는, defaults를 사용해서 기본값을 설정해서 같은 속성을 반복해서 입력할 수 있다. 이렇게 하면 코드를 간결하게 유지할 수 있다.
const tl = gsap.timeline({ repeat: -1, defaults: { x: 200, duration: 1 } })
// duration: 1을 더는 반복할 필요가 없다!
tl.to('.green', { })
.to('.purple', { scale: 0.2 })
.to('.orange', { scale: 2, y: 20 })
GSAP 컨트롤 & 콜백(Control & Callback)
컨트롤 (Control)
제어 메서드는 트윈과 타임라인 모두에 사용할 수 있으며, 애니메이션을 재생(play), 일시 정지(pause), 역방향 재생(reverse)하거나 속도를 조절(speed up)할 수 있다.
// 트윈이나 타임라인을 변수에 저장
const tween = gsap.to('#logo', { duration: 1, x: 100 })
// 일시 정지
tween.pause()
// 재개 (방향 유지 - 역방향이든 아니든)
tween.resume()
// 역방향 (항상 시작 지점으로 돌아감)
tween.reverse()
// 트윈의 정확히 0.5초 지점으로 이동
tween.seek(0.5)
// 트윈 진행 상태의 정확히 1/4 지점으로 이동
tween.progress(0.25)
// 트윈을 절반 속도로 만들기
tween.timeScale(0.5)
// 트윈을 두 배 속도로 만들기
tween.timeScale(2)
// 트윈을 즉시 종료하고 가비지 컬렉션 대상으로 만들기
tween.kill()
// 제어 메서드 연결
// 타임라인을 두 배 속도로 역방향 재생
tween.timeScale(2).reverse()
콜백 (Callback)
애니메이션이 시작될 때나, 애니메이션이 끝날 때 일부 JavaScript를 실행해야 한다면 콜백을 사용할 수 있다. 모든 트윈과 타임라인에는 다음과 같은 콜백이 있다.
- onComplete: 애니메이션이 완료되었을 때 호출
- onStart: 애니메이션이 시작될 때 호출
- onUpdate: 애니메이션이 업데이트될 때마다 호출(애니메이션이 활성화되어 있는 동안 매 프레임)
- onRepeat: 애니메이션이 반복될 때마다 호출
- onReverseComplete: 역방향으로 재생될 때 애니메이션이 다시 시작 지점에 도달하면 호출
GSAP 애니메이션 디버깅
GSDevTools는 GSAP 애니메이션을 시각적으로 조작하고 디버깅할 수 있는 UI를 제공한다. 특정 장면으로 점프하거나, in / out 포인트를 지정하고, 슬로우 모션으로 세밀하게 재생하거나, 작은 화면에서는 미니멀(minimal) 모드로 전환할 수도 있다.
GSDevTools 플러그인을 등록하려면 먼저 CDN을 통해 플러그인 파일을 불러와서 gsap.registerPlugin() 메서드를 사용해 GSDevTools 플러그인을 등록해야 한다. 그리고 GSDevTools.create() 메서드를 실행해서 GSDevTools 인스턴스(객체)를 생성하면 GSDevTools를 사용할 수 있다.
<!-- HTML에 플러그인 파일을 불러온다. -->
<script src="https://cdn.jsdelivr.net/npm/gsap/dist/GSDevTools.min.js"></script>// GSDevTools 플러그인 등록
gsap.registerPlugin(GSDevTools)
// GSDevTools 인스턴스 생성(글로벌 애니메이션 제어)
GSDevTools.create()
글로벌 애니메이션을 제어하는 대신, 특정 애니메이션 인스턴스에 연결하는 것을 권장한다.
const tl = gsap.timeline()
tl.to(/* ... */) // 애니메이션 추가
GSDevTools.create({ animation: tl })
오늘 하루를 돌아보며
오늘은 너무 많은 정보가 한 번에 와랄랄라 들어와서 정신이 하나도 없었다. 그래도 마지막에 직접 애니메이션을 제어해 보면서 실습을 해보니까 너무 재밌었다. GSAP을 이용하니까 애니메이션 기능이 정말 다양하고, 세밀하게 조작할 수도 있는 게 너무 신기했다.
GSAP 외에도 애니메이션 라이브러리가 다양하다. GSAP에 조금 더 익숙해지면 다른 라이브러리도 사용해 봐야겠다. 각 라이브러리에서 어떻게 애니메이션을 제어하는지도 궁금하고, 서로의 차이점이나 장단점도 궁금해진다.
