2. TweenMax 메서드

- 기본 메서드 

TweenMax.to : this 속성에서 지정한 속성까지

TweenMax.from :  지정한 속성에서 this 속성까지

TweenMax.fromTo :  from에서 지정한 속성에서 to에서 지정한 속성까지

ex) TweenMax.fromTo(target, duration, {from vars}, {to vars});

 

TweenMax.allTo / TweenMax.allFrom : for문 없이 여러 target을 동시에 적용

 

기본 구문: TweenMax.allTo(targets:Array, duration: Number, vars:Object):Array

 

example

TweenMax.allTo([mc1, mc2, mc3, mc4, mc5], 1, {y:"100", alpha:0, delayIncrement:0.2});

delayIncrement : Number - 각 target들 간에 delay
onCompleteAll : Function - onComplete는 각 target이 complete 될 때 마다 각각 호출
                         - onCompleteAll은 tween이 다 끝나고 한번만 호출
onCompleteAllParams : Array

TweenMax.set() : 요소에 애니메이션 없이 style(css)을 설정한다. 

TweenMax.isTweening(target:Object): Boolean 

 

- 여러 대상 실행

TweenMax.staggerTo() / TweenMax.staggerFrom() : Array, 각 요소에 순차적으로 애니메이션을 실행시킨다

 

TimelineMax : 하나의 애니메이션이 아닌 ani1 끝난후 ani2, ani2 끝난후 ani3 … 식의 타임라인 제작 가능

TweenMax.to()이 연달아 있는 코드와 비슷하다.

 

- 모션 제어

repeat(number) : 반복구문이며 number은 1부터 시작이다.

-1을 넣으면 무한반복이 된다.

delay가 있는 경우 첫번째 재생만 delay가 적용되고, repeat되는 동안은 delay가 적용되지 않는다.

TweenMax.to(".box", 1, {backgroundColor: '#54c0c7',repeat: 1});

var tween = TweenMax.to(".box", 1, {backgroundColor: '#54c0c7'});

tween.repeat(1);

repeatDelay() : 반복 지연시간을 초 단위로 지정할 수 있다.

 

yoyo() : Boolean, 애니메이션을 앞뒤로 반복하여 실행시켜준다.

repeat가 (A->B) * (number) 의 반복이라면 yoyo는 (A->B~B->A)*(number) 의 반복이다.

TweenMax.to(".box", 1, {padding: 20, repeat: 1, yoyo: true});

 

.reverse() : 애니메이션 재생을 되돌린다.

 

.reversed() : 애니메이션이 역방향으로 재생되어야하는지에 대한 여부 및 설정

 

isActive() : 애니메이션 활성화 여부를 나타낸다

const tween = gsap.to(".box", {
  duration: 2, 
  x: 300, 
  ease: "none",
  reversed: true
});


document.querySelector("#tweenBox").addEventListener("click", function() {
  if(!tween.isActive()) {
    // Only reverse the direction if the tween is not active
    tween.reversed() ? tween.play() : tween.reverse();
  }
});

*삼항연산자

조건 ? ture : false

 

TweenMax.delayedCall(delay:Number, onComplete:Function, onCompleteParams:Array); 
 -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) 방향을 바꾸지 않고 재생을 계속합니다.

 

 

그 외 상세 메서드는 greensock에서 살펴보기!!

출처: https://webkimsora.tistory.com/31?category=692303 [코딩 공부하는 소라]