[TweenMax | GSAP] 트윈맥스 - 기초4 (Tween 컨트롤하기 [심화] )

공식 사이트  트윈 : greensock.com/docs/v3/GSAP/Tween

1. callbackScope( onStart, onUpdate, onComplete 등)
   주로 쓰는것 : onComplete
   tween이 완료될때 실행시킬 함수가 있는경우 사용합니다.

2. delay (지연)
지연을 주고 싶을때 사용합니다.

3. duration (기간)
얼마나 걸릴지 결정해줍니다. 설정해주지 않는다면 0.5가 기본값입니다.

4. repeat (반복)
말그대로 반복을 의미합니다. 
Default는 0 이며, 반복하고 싶은 숫자를 넣어주면 됩니다.
무제한으로 실행시키고싶으면 -1 을 넣어줍니다.

5. yoyo 참고 : css animation 효과인 animation-direction: alternate; 와 같다고 보시면 됩니다.
어릴적 가지고 놀던 요요를 생각하면 이해하기 수월합니다.
보통 반복을 설정해주었을때 넣어주는데
예를들어 깜박거리는 모션을 만들기 위해선
opacity: 0 -> 1 -> 0 -> 1 -> 0 -> 1 이 반복 되어야합니다.
이때 yoyo 를 설정하지 않으면 0 -> 1 -> 0 에서 강조한부분이 자연스럽지 않게 깜박 거리며 바뀌겠지만
yoyo를 설정해 줄 경우, 내가 최초 0 -> 1 에 설정해준 모션이 적용되어 자연스럽게 보여집니다.

6. repeatDelay (반복지연)
반복이 실행되기 까지의 delay를 주는것입니다.
yoyo로 실행되는 되돌아가는 모션에도 delay가 적용됩니다.

7. reversed (역순)
역순으로 실행됩니다. repeat과는 함께 쓰이지 않습니다.

8. stagger
참고 : greensock.com/docs/v3/Staggers
여러개의 개체가 같은모션을 순자척으로 실행시킬때 사용합니다.
'안녕하세요.' 라는 글짜가 순차적으로 한글짜씩 보인다고 생각하면 수월합니다.

 //html
 <div class="textarea">
    <span>안</span>
    <span>녕</span>
    <span>하</span>
    <span>세</span>
    <span>요</span>
  </div>
  
  //css
  .textarea span{
  	opacity: 0
  }
  
  //js
  gsap.to('.textarea span', 0, { opacity: 1, stagger: 0.2 });

9. keyframes
한개의 객체의 연속모션을 만들때 유용합니다.

//html
<div class="circle"></div>
<div class="class"></div>

//css

.class {
  background-color: red;
  width: 100px;
  height: 100px;
}

//js
gsap.to('.class', {
  keyframes: [
    { x: 100, duration: 1 },
    { y: 200, duration: 1, delay: 0.5 }, //create a 0.5 second gap
    { rotation: 360, duration: 2, delay: -0.25 }, //overlap by 0.25 seconds
  ],
  ease: 'power3.inOut',
  yoyo: true,
});

-> 참고 : 뒤에 나올 내용이지만, timeline과는 어떤점이 다르고 어떨때 사용하는걸까 ?
keyframes는 하나의 개체만 가지고 모션을 준다면, timeline은 여러가지 개체를 가지고 모션을 만들때 사용합니다.
예를 들어, class 하나만 가지고 모션을 만들땐 keyframes를 사용하고
class 와 circle 2개를 가지고 모션을 만들땐 timeline을 가지고 모션을 만듭니다.

9. motionPath (구 bezier)
간단하게 생각하면 선을 따라 움직인다고 생각하면 좋을것같습니다.
꽃잎이 휘날리고, 눈이 휘날리는 모션을 만들때 쉽게 사용할 수 있습니다.

motionPath: [{x:200, y:100}, {x:400, y:0}, {x:300, y:200}]