Javascript　初めてのGSAPアニメーションの使い方　その8　Timeline制御と開始位置制御

前回の記事はこちら
[Javascript　初めてのGSAPアニメーションの使い方　その7　TimelineMaxのラベルと同期処理
](https://qiita.com/fumiya0414/items/e401cb70769a9f2206aa)

今回はtimelineの制御について説明します。

以下のhtmlを準備します。※配置と色はCSSで調整しています。

```html
    <div class="row row1">
      <div class="column col1">
        <p>パネル 1 (.circle)</p>
        <div class="circle shape"></div>
      </div>
      <div class="column col2">
        <p>パネル 2 (.square)</p>
        <div class="square shape"></div>
      </div>
      <div class="column col3">
        <p>パネル 3 (.rectangle)</p>
        <div class="rectangle shape"></div>
      </div>
    </div>
    <!--row1 -->

    <div class="row row2">
      <div class="column col4">
        <p>パネル 4 (.triangle)</p>
        <div class="triangleContainer">
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
          <div class="triangle shape"></div>
        </div>
        <!--triangle container -->
      </div>
      <div class="column col5">
        <p>パネル 5 (.oval)</p>
        <div class="oval shape"></div>
      </div>
      <div class="column col6">
        <p>パネル 6 (.pacman)</p>
        <div class="pacman shape"></div>
        <div class="pacman shape"></div>
        <div class="pacman shape"></div>
        <div class="pacman shape"></div>
        <div class="pacman shape"></div>
        <div class="pacman shape"></div>
        <div class="pacman shape"></div>
        <div class="pacman shape"></div>
      </div>
    </div>
    <!--row1 -->

    <div class="playback_controls_row">
      <a href="#0" class="playbackButton playButton">Play</a>
      <a href="#0" class="playbackButton pauseButton">Pause</a>
      <a href="#0" class="playbackButton resumeButton">Resume</a>
      <a href="#0" class="playbackButton reverseButton">Reverse</a>
      <a href="#0" class="playbackButton slowButton">Slow</a>
      <a href="#0" class="playbackButton fastButton">Fast</a>
      <a href="#0" class="playbackButton seekButton">Seek</a>
      <a href="#0" class="playbackButton progressButton">Progress</a>
    </div>

```

[![Image from Gyazo](https://i.gyazo.com/c458dffc350f936b6f545dd86cc5ce2f.png)](https://gyazo.com/c458dffc350f936b6f545dd86cc5ce2f)

##timeline制御

まずはtimelineを作成してstaggerFromで連続したアニメーションにします。
x軸方向50px、y軸方向50pxの位置、opacity0の状態から
0.2秒の時間差で.shapeクラスのついた要素をアニメーションします。

要素の取得はJqueryで記述します。

```js
const tlShapes = new TimelineMax();

tlShapes.staggerFrom('.shape', 0.5, {x: 50, y:50, opacity:0},0.2);

```

[![Image from Gyazo](https://i.gyazo.com/9708e3ab0bafa0951ee730e70a5f6516.gif)](https://gyazo.com/9708e3ab0bafa0951ee730e70a5f6516)

下のボタンにそれぞれtimeline制御の操作を設定します。

###play/pause

```js
$('.playButton').click(function(){
  tlShapes.play();
});

$('.pauseButton').click(function(){
  tlShapes.pause();
});
```
[![Image from Gyazo](https://i.gyazo.com/21444e24c3e459149340df7264f34687.gif)](https://gyazo.com/21444e24c3e459149340df7264f34687)

pauseボタンで一時停止、playボタンで再開の制御を設定できました。

###resume/reverse

```js
$('.resumeButton').click(function(){
  tlShapes.resume();
})

$('.reverseButton').click(function(){
  tlShapes.reverse();
})
```
[![Image from Gyazo](https://i.gyazo.com/f82f8c37d15b8ce096c952c002af123d.gif)](https://gyazo.com/f82f8c37d15b8ce096c952c002af123d)

reverseボタンでアニメーションの逆再生、resumeボタンで再生方向の再生を設定しました。

playの場合はアニメーションは順方向に必ず再生されますが
resumeでは進行中のアニメーションの方向に再生ができます。

reverse再生したものを止めて再びreverse方向に再生したい時に使いましょう。

###timeScale

```js
$('.slowButton').click(function(){
  tlShapes.timeScale(0.5);
})
$('.fastButton').click(function(){
  tlShapes.timeScale(1.5);

```
[![Image from Gyazo](https://i.gyazo.com/1925b745aba927fb3b101d50e48d97fd.gif)](https://gyazo.com/1925b745aba927fb3b101d50e48d97fd)

timeScaleを使うとスピードの速さを比率で制御できます。
slowボタンには0.5倍速、fastボタンには1,5倍速を設定しました。

###seek/progress

```js
$('.seekButton').click(function(){
  tlShapes.seek(0.2);
})
$('.progressButton').click(function(){
  tlShapes.progress(0.8);
})
```

[![Image from Gyazo](https://i.gyazo.com/ae1b6eb0baf63f93e7111eca94a0383d.gif)](https://gyazo.com/ae1b6eb0baf63f93e7111eca94a0383d)

seekは指定した秒の箇所からアニメーションを再生します。
上記では全体の0.2秒後から再生

progressは指定したパーセンテージの箇所からアニメーションを再生します。
上記では全体の８０％の位置から再生

##開始位置制御

シンプルなTweenMaxではアニメーションの開始位置は
htmlとCSSで書かれた場所になります。

下記では円を左右中央揃えしたポジションが０の位置です。

[![Image from Gyazo](https://i.gyazo.com/b69e40c266b4c67a73761416006c6131.png)](https://gyazo.com/b69e40c266b4c67a73761416006c6131)

以下のコードでは上記を起点にしてx軸方向にアニメーションは動きます。


```js
TweenMax.to ('.circle', 1, {x:100});
```

[![Image from Gyazo](https://i.gyazo.com/fe137ca41320cb0f9d4a640a6fb8abf5.gif)](https://gyazo.com/fe137ca41320cb0f9d4a640a6fb8abf5)

以下のようにfromToを使用すると第３引数と第４引数で開始位置と終了位置を指定できます。

```js
TweenMax.fromTo('.circle', 1, { x: -100, scale:0}, {x:100, scale:1.5});
```
[![Image from Gyazo](https://i.gyazo.com/c73dd42413ef619807744ffb59fc3072.gif)](https://gyazo.com/c73dd42413ef619807744ffb59fc3072)

開始位置を-100px,終了位置を100pxの方向にアニメーションさせています。
位置以外のプロパティ（scaleなど）も一緒に指定することができます。

staggerにstaggerFromToとすることで開始と終了位置を指定できます。
以下はx軸y軸方向に起点と終点を設定しています。

```js
TweenMax.staggerFromTo('.triangle', 1, { y:200, x:200},{ y:-50, x:-50},0.2)
```
初期位置
[![Image from Gyazo](https://i.gyazo.com/bed7a1d8f58a6d82645d6d2f26cffa62.png)](https://gyazo.com/bed7a1d8f58a6d82645d6d2f26cffa62)

アニメーション

[![Image from Gyazo](https://i.gyazo.com/5ab6e378e9a0dc993a8aed879bb9d151.gif)](https://gyazo.com/5ab6e378e9a0dc993a8aed879bb9d151)

少しわかりにくいですが起点が右下に200pxずれて終点は左上に50ｐｘずれています。