GSAP 문법 기본

GSAP 설치

기본적으로 두 가지 방법의 설치방법이 있고, 각자의 프로젝트 셋업에 따라 설치하면 된다.

HTML을 사용하는 프로젝트에는 <script> 태그를 추가해주면 된다.

HTML

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

node를 사용하는 경우에는 NPM으로 설치가능

Plain Text

npm install gsap

gsap 애니메이션을 사용하기 위해서, 설치후 위와 같은 문법으로 애니메이션을 정의할 수 있다.

이 메소드 문법에는 애니메이션을 정의하는 to(), from(), fromTo(), set() 과 같은 요소를 이동시키는 메소드를 사용할 수 있다. 먼저 어떻게 동작하는 지 직접 선택해보면서 익혀보자.

💡

Tween이란?

시작과 끝이 명확한 단일 애니메이션, 용어 자체는 ‘in-between’에서 유래되었는데,

애니메이션의 시작 상태와 끝 상태 사이의 모든 중간 동작을 GSAP이 알아서 부드럽게 만들어 준다는 의미

따라서, gsap.to(".box", { x: 200 }) 이 코드는 .box라는 클래스를 가진 요소를 오른쪽(x축)으로 200px만큼 부드럽게 움직여라" 라는 의미

Tween에서 가장 일반적인 메소드이다. 최초 상태에서 vars에 정의된 상태까지 부드러운 애니메이션으로 이동 시키는 역할을 한다.

to와는 반대로 작동하는 메소드라고 생각하면 좋은데, vars로 정의한 상태에서 최초 상태로 부드럽게 되돌리는 역할을 한다.

fromTo에는 세 가지 인자를 전달할 수 있는데, 시작지점과 마지막 지점을 직접 정의할 수 있다. 그리고 그 사이를 애니메이션으로 이동한다

애니메이션을 사용하지 않고 바로 요소를 이동시키는 역할을 한다.

애니메이션에 관한 모든 정보를 가지고 있는 객체라고 할 수 있는데, 두 가지 유의사항이 있다.

css를 그대로 사용할 수 있지만, 사용하기 위해서는 케밥케이스가 아니라 카멜케이스를 사용해야된다.

라이브러리만의 약어가 존재하는데, x: 100px 은 translateX(100px)와 같은 역할을 한다. 이와 같은 약어들이 많다.

일반 속성 도표

GSAP	Description or equivalent 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"	Using Radians - no CSS alternative
skew: 30	transform: skew(30deg)
skewX: 30	transform: skewX(30deg)
skewY: "1.23rad"	Using Radians - no CSS alternative
transformOrigin: "center 40%"	transform-origin: center 40%
opacity: 0	adjust the elements opacity
autoAlpha: 0	shorthand for 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

특수 속성 도표

속성	설명
duration	애니 메이션 지속 시간
delay	애니메이션의 시작되기 전의 상태
repeat	얼마나 반복시킬지
yoyo	설정이 되어있으면 애니메이션이 반복 될때마다, 반대로 되돌리는 작업을 한다.
stagger	여러 애니메이션이 제공 되었을때, 각 애니메이션 사이의 시간 설정
ease	애니메이션이 진행되는 동안의 속도 변화를 제어하여 움직임의 '개성'이나 느낌을 조절한다. 기본값은 "power1.out"
onComplete	애니메이션이 완료되었을 때 실행할 수 있는 콜백함수