TweenMax 코딩 참조~

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

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

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

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

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

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});