반응형
프로젝트를 하다 보면 동적으로 웹 퍼블리싱해야 할 경우 jQuery animaion을 사용하거나, css animaition을 대부분 사용합니다. 
애니메이션을 더 사용하기 쉽고 강력크한 퍼포먼스를 구현할 수 없을까?
바로~~ 바로!!!
트윈맥스 애니메이션 자바스크립트 라이브러리에 대해 여러 편에 걸쳐 포스팅하여 제대로 알아보겠습니다.

 

 

 

 

GSAP

 

GreenSock Animation Platform (GSAP)는 퍼블리싱을 하면서 애니메이션을 쉽게 사용할 수 있는 강력한 타임라인 기반의 전용 애니메이션 자바스크립트 라이브러리입니다.

GSAP는 CSS의 keyframeanimation 보다 더 정밀한 컨트롤을 할 수 있습니다. 

또한 GSAP는 제이쿼리보다 20배 이상 퍼포먼스가 좋습니다.

이번 가이드에서는 GSAP세팅방법기본문법에 대해서 알아볼 것입니다.

 

 

 

 

Get GSAP (Installation)

 

코드를 작성하기 전에, HTML 파일에 GSAP 라이브러리를 추가해야 합니다.

CDN을 이용하여 추가해도 되고 파일을 다운로드하여 추가해도 됩니다.

당연히 NPM으로 설치도 가능합니다.

 

CDN 버전 선택 방법 : https://cdnjs.com/libraries/gsap/3.8.0

Download 방법 : https://greensock.com/docs/v3/Installation/#download

NPM 설치 방법 : https://greensock.com/docs/v3/Installation/#npm-club

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>GSAP</title>
	<!-- CDN -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/gsap.min.js"></script>		
    
	<!-- local(download file) -->
	<script src="js/gsap.min.js"></script>
</head>
<body>

</body>
</html>

 

 

 

 

기본 문법

 

gsap.to(target:Object, duration:Number, {variables:Object});

.to()는 일반적으로  제이쿼리의 .animate()라고 생각하면 됩니다.


target : Object - 대상 오브젝트(인자)

duration : Number - 애니메이션 지속 시간 /(초)

variables : Object - target에 부여할 키 값

 

 

  문법 작성 기본규칙  

 

Ⅰ. CSS  키값은 동일하지만 border-radius, border-right 와 같이 '-' 문자가 들어가 있을 경우 카멜 표기법을 사용하면 됩니다. (EX : borderRadius, borderRight)

Ⅱ. target은 유연하게 사용 가능하기 때문에 제이쿼리 형태로 사용해도 되고 아니어도 됩니다. (EX : $(".tweenbox") , .tweenbox, 변수명 

 

 

 

 

입문 가이드 마치며...

 

다음 포스팅은 GSAP의 메서드와 VARIABLES에 대해서 가이드할 계획입니다.

이번 입문 가이드에 대해서 이해 못하셔도 됩니다. 다음 포스팅에서는 예제를 작성하여 설명할 예정이니까요!!

좀 더 쉽겠죠??

저만의 생각은 아니겠죠??

제가 작성하고 공유하는 가이드가 웹퍼블리싱 하는데 도움이 되었으면 합니다.

 

반응형

+ Recent posts