TweenMax js버전

TweenMax

 

그 전 job이 액션스크립터였을 당시 TweenMax 없이는 모션 작업이 불가할 정도였다.

그만큼 많이 의지도 했었지만 정말 훌륭한 라이브러리였는데.. js 쪽으로 부활하다니....

 

성능에 긴가민가였는데... 역시는 역시.... 좋다.

요새 자주 사용하는 라이브러리중 하나이다.

 

TweenLite/TweenMax Guideline: https://greensock.com/get-started-js

Getting Started with GSAP

 

css animation 참조 : http://css-tricks.com/myth-busting-css-animations-vs-javascript/

 

간단 사용법

 

var $box = $('#box');
var tween = TweenLite.to($box, 2, { x: 100,
   ease: Power1.easeInOut,
   delay: 2,
   onComplete: myFunction, 
   onCompleteParams: [element, 'param2']
});

//옵션 설명
//ease: Power0.easeNone //no easing = Linear
//ease: Power1, Power2, Power3, Power4, Back
//Bounce, Circ, Elastic, Expo, Sine
//( 공통 easing 함수 - .easeIn .easeOut .easeInOut )

//delay: 2, // 단위 second - 모션 딜레이

// Callback functions
//onComplete: // 모션이 다 끝난후 실행
//onUpdate: // 모션 실행중에 실행 

// From Tween
TweenLite.from( element,duration, {fromVars} )
// FromTo Tween
TweenLite.fromTo( element,duration, {fromVars}, {toVars});