GSAP 사용하기 1 (기본 트윈, 특수속성)

GSAP란?

GSAP(GreenSock Animation Platform)는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리이다. 이 라이브러리의 가장 큰 장점은 가볍고 쉬운 사용방법이다.

※ Lite, Max가 포함된 구문은 이전 구문으로 최신 GSAP3 구문을 사용하자. GSAP4에서는 이전 구문이 지원되지 않을 것.

// 이전
TweenLite.to()
TweenMax.from()
new TimelineMax()

// 새로운
gsap.to()
gsap.from()
gsap.timeline()

 

GSAP 설치

CDN에서 로드하거나 사이트에서 다운로드, npm,Yarn을 통한 설치, Git 방법이 있다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>

 

기본 트윈 작업

gsap.to()

gsap.to를 사용하기 위해서는 대상(targets)과 속성/값(vars)가 필요하다.

아래 코드는 클래스명이 .box1인 요소를 x좌표 200px 이동, 720deg 회전, 가로 세로 1.2배 크기로 확대하는 효과를 0.5초 동안 보여준다.

( duration 기본값은 0.5초 )

 

※ css 관련 속성에서 하이픈이 있는 속성은 camelCase로 표기해야한다. font-size => fontSize , background-color => backgroundColor

transform 관련 속성 단축 코드

GSAP는 모든 transform 값에 애니메이션을 적용 할 수 있지만 단축코드를 사용하는 것이 더 빠르고 정확하다.

GSAP	css
x : 100	transform: translateX(100px)
y : 100	transform: translateY(100px)
rotation : 360	transform : rotate(360deg)
rotationX : 360	transform : rotateX(360deg)
rotationY : 360	transform : rotateY(360deg)
skewX : 45	transform : skewX(45deg)
skewY : 45	transform : skewY(45deg)
scale : 2	transform : scale(2,2)
scaleX : 2	transform : scaleX(2)
scaleY : 2	transform : scaleY(2)
xPercent : - 50	transform : translateX(-50%)
yPercent : - 50	transform : translateY(-50%)

gsap.from() , gsap.fromTo(), gsap.set()

to와 정반대로 from()은 시작값을 정하고 원래대로 되돌아오는 애니메이션이 실행된다. fromTo()는 시작 값과 끝 값을 정의 하는 메서드이고 set()은 효과 없이 바로 즉시 설정하는 메서드 이다 

See the Pen GSAP - gsap.from() by hwls8253 (@hwls8253) on CodePen.

 

특수속성

delay : 애니메이션 시작 전에 지연 속도

특수 속성의 자세한 목록은 API문서 참조

onUpdate : 애니메이션이 업데이트/렌더링 될 때 마다 호출해야 하는 콜백

특수 속성의 자세한 목록은 API문서 참조

Easing

시작점과 끝점 사이의 이동 스타일을 결정한다. 변경 속도를 제어하는 속성으로 다양한 효과를 적용할 수 있다. 

CustomEase 확인

Docs

CustomWiggle 및 CustomBounce 확인

Staggers

대상들의 애니메이션 시작 사이의 시간을 제어한다. 고급 staggers기능은 CodePen을 참조

See the Pen GSAP - Staggers by hwls8253 (@hwls8253) on CodePen.

Callbacks

특정 애니메이션 관련 이벤트가 발생할 때 함수 호출

- onComplete : 애니메이션이 완료되면 호출됩니다.

- onUpdate : 애니메이션이 업데이트 될 때마다 호출됩니다. (애니메이션이 활성화된 동안 모든 프레임에서)

- onRepeat : 애니메이션이 반복될 때마다 호출됩니다.

- onReverseComplete : 애니메이션이 역방향 (반복제외)에서 다시 시작될 때 호출 할 함수입니다.

See the Pen GSAP - Callbacks by hwls8253 (@hwls8253) on CodePen.

콜백 매개변수

콜백함수는 임의의 매개변수를 선택적으로 전달 할 수 있다. 매개 변수는 배열 형태로 전달되어야 한다(여러개 가능)

See the Pen GSAP - Callback Parameters by hwls8253 (@hwls8253) on CodePen.