TWEENMAX - 매서드

환경세팅

1) html파일에 스크립트 파일을 연결합니다

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> //cdn 연결

2) 마크업에 맞도록 html, js을 작성합니다

TWEENMAX 기본 문법

특정 속성의 값을 3초 동안 모서리에 라운드 트윈을 주는 기본 문법 코드는 다음과 같습니다.
gsap.to('.tweenbox', 3, {borderRadius: 30});

• 첫번째 파라미터값 : 트윈 할 목표 대상(target)
• 두번째 파라미터값 : 지속시간(duration)
• 세번째 파라미터값 : 트윈 할 목표 대상의 변화 된 다른 속성(proterties)

TWEENMAX 메서드

TweenMax.staggerTo( ) : (2버전 문법 현재는 3버전으로 바뀌면서 TimelineMax로 통일)
여러 개의 배열(Array)인 this(Target) 속성을 순차적(시간 차)으로 지정한 속성까지 트윈

stagger(Target배열) : 각 배열 트윈 사이의 모션 실행
TimelineMax(트윈 배열) : this(Target)트윈이 종료 후 모션 실행

function tweenStaggerTo(){
    var m0 = document.getElementById("e0");
    var m1 = document.getElementById("e1");
    var m2 = document.getElementById("e2");
    var m3 = document.getElementById("e3");
    var m4 = document.getElementById("e4");
    TweenMax.staggerTo([m0, m1, m2, m3, m4], 1, { rotation:180 }, 0.5); //TweenMax.staggerTo([객체1, 객체2, 객체3], 시간, {트윈 모션}, 모션 사이의 딜레이 시간);
}

TweenMax.staggerFrom( )
여러 개의 배열(Array)을 지정한 속성에서 this(Target) 속성까지 순차적(시간 차)으로 트윈 합니다.

TweenMax.staggerFrom(target(Array), duration, {vars}, 대상 배열 트윈 사이의 딜레이 시간);

TweenMax.staggerFrom('.tweenbox', 1, {
    ease: Back.easeOut,
    opacity: 0,
    y: 200,
    delay: 0.5
}, 0.2);

TimelineMax( )
this(Target) 하나의 객체를 순차적으로 트윈 하는 타임라인 문법입니다.

var timeLine = new TimelineMax();
timeLine.to('.tweenbox', 1, { backgroundColor: '#ddd' })
    .to('.tweenbox', 1, { backgroundColor: 'cyan' })
    .to('.tweenbox', 1, { backgroundColor: '#ccc' });

TWEENMAX Controlling

• repeat(number) : 반복구문이며 number은 1부터 시작( -1을 넣으면 무한반복)
  delay가 있는 경우 첫번째 재생만 delay가 적용되고 repeat되는 동안은 delay가 적용되지 않는다.
• repeatDelay() : 반복 지연시간을 초 단위로 지정
• yoyo() : Boolean(true, false), 애니메이션을 앞뒤로 반복하여 실행
  repeat가 (A->B) (number) 의 반복이라면 yoyo는 (A->B~B->A)(number) 의 반복
• reverse() : 애니메이션 재생을 되돌린다.
• reversed() : 애니메이션이 역방향으로 재생되어야하는지에 대한 여부 및 설정
• isActive() : 애니메이션 활성화 여부
• timeScale(number) : 트윈의 속도 증가와 감속을 설정
  기본값은 1이며, 1보다 작을 경우 속도가 감소하며, 값이 1보다 클 경우 속도가 증가
  -target 없이 함수를 delay : (1.0 ==> 1초) 후에 호출

kill관련 : 트윈 기능 없애는 메서드

• TweenMax.killAll() : 전체 트윈 기능 없앰
• TweenMax.killDelayedCallsTo(function:Function);
  -해당 delayedCall함수를 kill 함
• TweenMax.killAllTweens(complete:Boolean):void
  -false(default) : pause() 처럼 보이면서 tween kill
  -true : complete 화면을 보여주고 tween kill
  -delayedCall은 kill안됨
• pause(): void, 현재 위치에서 일시 중지
• paused(): void, 애니메이션이 현재 일시 중지 되었는지에 대한 여부 및 설정
• resume() : (suppressEvents : Boolean) 방향을 바꾸지 않고 계속 재생

easing