[TweenMax | GSAP] 트윈맥스 - 기초5 (Timeline 사용하기)

공식문서 : greensock.com/docs/v3/GSAP/Timeline

타임라인이 트윈맥스의 꽃입니당! 어렵지 않으니 꼭 잘 읽어보세요!

타임라인은, 연결되는 모션을 만들어줄때 유용하게 사용할 수 있습니다.
만약, timeline을 사용해주지 않고 연결된 모션을 만든다고 생각한다면

delay를 이용해 모션 끝나는 시간을 계산해 delay를 주어 연결된 모션을 만들어야할것입니다!

트윈맥스에서도 마찬가지로, timeline을 사용하지 않고, 일반 gsap을 사용해서 만든다면 delay를 이용해야합니다.

// WITHOUT Timelines (only using tweens with delays):
gsap.to("#id", {x: 100, duration: 1});
gsap.to("#id", {y: 50, duration: 1, delay: 1});      //wait 1 second
gsap.to("#id", {opacity: 0, duration: 1, delay: 2}); //wait 2 seconds

//WITH Timelines (cleaner, more versatile)
var tl = gsap.timeline({repeat: 2, repeatDelay: 1});
tl.to("#id", {x: 100, duration: 1});
tl.to("#id", {y: 50, duration: 1});
tl.to("#id", {opacity: 0, duration: 1});

 

1. Timeline 만들기

var tl = gsap.timeline();

간단하게 생성 완료 할 수 있습니다.

이제 tl을 가지고 모션들을 이어나가주면 됩니다.

2. Timeline의 properties

timeline에 넣어주는 속성이므로, 해당 timeline전체(묶음)를 기준으로 속성을 준다고 생각하면 수월합니다.
해당 문서를 보면 다양한 속성들이 존재하는데, 이는 앞서 Tween에서 확인한 속성과 비슷하므로 설명은 건너뛰고
어떤식으로 다른지 코드로 확인해보겠습니다.

let gsap_tween = gsap.timeline();
gsap_tween.to('.circle', 1, { x: 100, repeat: 2, yoyo: true }) //
          .to('.class', 1, { x: -100 });
  
let gsap_tl = gsap.timeline({repeat: 2, yoyo: true });
gsap_tl.to('.circle', 1, { x: 100 }) //
       .to('.class', 1, { x: -100 });

1. gsap_tween은 timeline은 만들었지만 해당 개체(Tween)에 repeat과 yoyo를 준 모습입니다.
-> 이렇게 코드를 작성하면, 해당모션은

circle 이 x방향으로 100만큼 이동했다(x: 100) 제자리로 돌아오는것(yoyo: true)을 2번 반복(repeat: 2)하고 class가 -100만큼 이동한다.

2. gsap_tl은 timeline에 repeat과 yoyo를 준 모습입니다.
-> 이렇게 코드를 작성하면, 해당모션은

circle 이 x방향으로 100만큼 이동(x: 100) class가 -100만큼 이동하고 (x : -100)
/ class가 100만큼 돌아오고 circle이 -100만듬 돌아온다 (yoyo: true) 
그리고 
위의 모션이 2번 반복한다 (repaeat : 2)

timeline에 전체적으로 모션이 적용된다는 말뜻이 이해되었나요?
만약 이해가 안된다면 그냥 코드를 돌려보는편이 13000%났습니다.

//html
  <div class="circle"></div>
  <div class="class"></div>
  
 //css
 .circle {
  background-color: midnightblue;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.class {
  background-color: red;
  width: 100px;
  height: 100px;
  /* animation: aa 2s alternate infinite; */
}

//js

let gsap_tween = gsap.timeline();
gsap_tween.to('.circle', 1, { x: 100, repeat: 2, yoyo: true }) //
          .to('.class', 1, { x: -100 });
  
//let gsap_tl = gsap.timeline({repeat: 2, yoyo: true });
//gsap_tl.to('.circle', 1, { x: 100 }) //
//       .to('.class', 1, { x: -100 });

주석처리하고 하나하나 돌려보세요!

---

timeline내용 반이 끝났습니다.

하나만 더 알아보자면, 

var tl = gsap.timeline();
tl.to(...) 
  .from(...)
  .fromTo(...)
  .staggerTo(..)
  .staggerFromTo(...)
  .add(...)
  .set(...)

등이 가능하다는 겁니다.

저의 경험으로 조금더 내용을 보태자면,

* 모션을 넣어야하는 element 들의 세팅을 일정하게 넣어주어 (결과값으로 세팅할거면 결과값으로, 초기값으로 세팅할거면 초기값으로)
from과 to는 섞어쓰지 않는 것이 나았습니다.

* 여러개의 개체가 동일모션을 0.5초같이 몇초간의 간격으로 적용되야할때는 stagger을 사용하는게 좋았습니다.

* fromTo같은 경우엔 세팅을 깜박한 경우에 넣어줬었는데, 편하긴했으나 통일감을 위해 세팅을 해줬었다면 세팅을 해주는게 나을것같습니다.

* set의 경우엔, 모션을 모두 킬하고 재 세팅을 해줄때 사용해 주었습니다.

* add의 경우엔, 일반 gsap으로 넣기에는 타이밍 조절이필요하고, 4번째 모션이 2번째에 같이 시행되어야 할떄 넣어줬습니다.

let tl = gsap.timeline();
tl.to('.circle', 1, { x: 100 }) //
  .to('.class', 1, { x: -100 })
  .to('.textarea span', 0, { opacity: 1, stagger: 0.2 });

라는 모션이 있을때, 이 모션의 순서는 circle 모션 -> class 모션 -> textarea 모션 이 작동할테지만,

let tl = gsap.timeline();
tl.to('.circle', 1, { x: 100 }) //
  .add('start')
  .to('.class', 1, { x: -100 })
  .to('.textarea span', 0, { opacity: 1, stagger: 0.2 }, 'start');

이렇게 add 를 통해 label을 넣어줄경우에는 

이 모션의 순서는 circle 모션 -> class 모션 && textarea 모션이 동시에 작동됩니다.