[GSAP] 애니메이션 사용법 (기초)
Lpla
·2021. 2. 28. 20:20
GSAP?
GSAP는 GrennSock에서 만든 자바스크립트 애니메이션 라이브러리이다.
일반적으로 애니메이션 효과는 CSS로 처리하거나 제이쿼리(JQuery)에서 제공하는 .animate()나 fadeIn(), SlideDown() 등으로 구현하는 것이 일반적이다. 하지만 사용자의 욕구는 끝이 없고 그 이상의 복잡한 애니메이션을 구현하려면 다른 도구의 힘을 빌려야 하는데 GSAP가 그 중 하나이다.
GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋고 사용법도 간단하다고 주장한다.
하지만 초보자들에게 그 간단한 사용법 조차도 어렵고 헷갈리는 것이 사실이다. 공식 사이트에서 배워보려 해도 방대한 문서 양에 어디서부터 시작해야 할지 막막하다.
GSAP를 배우려는 목적은 멋진 애니메이션 효과를 구현하고 싶기 때문이겠지만 그 마음은 잠시 접어두고 기초부터 배워보자.
설치
공식 사이트에서 받거나 CDN, 혹은 npm install gsap로 설치할 수 있다.
Docs
Documentation for GreenSock Animation Platform (GSAP)
greensock.com
gsap - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
GSAP is a JavaScript library for building high-performance animations that work in **every** major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects...anything JavaScript can touch! No other library delive
cdnjs.com
파일의 종류가 정말 많지만 가장 기본이 되는 gsap.js 혹은 gsap.min.js 만 사용해보자.
나는 gsap.min.js 를 선택했다.
HTML
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="script.js"></script>
</body>gsap.min.js와 css, js 파일을 하나씩 불러오고 box 요소를 세 개 만들었다.
gsap.to()
gsap.to에는 2가지 필수값이 필요하다. 대상과 속성이다.
만약 box 클래스를 오른쪽으로 200px 만큼 이동하고 싶다면 아래와 같이 작성하면 된다.
See the Pen GSAP 기초(1) by lpla (@lpla) on CodePen.
이것은 css로 transform: translateX(200px) 과 정확히 같은 효과이다.
duration은 작성하지 않으면 기본값인 0.5초로 나타난다.
이제 opacity나 rotate, scale 등 다양한 css를 적용할 수 있다.
See the Pen GSAP 기초(1) -gsap.to -2 by lpla (@lpla) on CodePen.
사용 가능한 프로퍼티는 여기에서 확인할 수 있다.
Docs
Documentation for GreenSock Animation Platform (GSAP)
greensock.com
gsap.from(), fromTo(), set()
gsap.to()를 이해했다면 나머지도 쉽게 이해할 수 있다.
from()은 to와 정반대로 시작값을 정하고 원래대로 되돌아오는 애니메이션이 실행된다.
fromTo()는 from 속성이 시작값으로 세팅되고 to 속성이 종료값으로 세팅되어 애니메이션 효과가 나타난다.
set()은 애니메이션 효과 없이 즉시 변경된다.
See the Pen GSAP 기초(1) -gsap.to -5 (gsap.from, fromTo, set) by lpla (@lpla) on CodePen.
gsap.play(), .pause(), resume(), reverse(), restart()
애니메이션을 멈추거나 재실행하는 등의 핸들링도 가능하다.
See the Pen GSAP 기초(1) - play, pause, resume, reverse, restart by lpla (@lpla) on CodePen.
TimeLine
delay를 사용해서 애니메이션을 순차적으로 실행할 수 있다.
See the Pen GSAP 기초(1) -gsap.to -3 (Delay) by lpla (@lpla) on CodePen.
하지만 이것은 매우 비효율적인 작업이라는 것을 쉽게 알 수 있다.
GSAP에서 순차적으로 애니메이션을 실행하려면 TimeLine을 사용해야 한다.
See the Pen GSAP 기초(1) -gsap.to -4 (TimeLine) by lpla (@lpla) on CodePen.
다음 시간에는 스크롤 이벤트에 대해 알아보겠다.
