Javascript 初めてのGSAPアニメーションの使い方 その3 Timelinemax

前回の記事はこちら

Javascript　初めてのGSAPアニメーションの使い方　その2　Tween.from/Jqueryとの併用

Timelinemax

    <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>

上記のようなhtｍｌをTweenMax.toで動かしてみます。

TweenMax.to('.circle', 1, {x: 100});
TweenMax.to('.square', 1, {x: 100, delay: 1});
TweenMax.to('.rectangle', 1, {x: 100, delay: 2});

パネル１→３に向かってアニメーションをコントロールしていますが
秒数指定では要素が増えるほど記述が煩雑になります。

そこでTimelineMaxを使用してアニメーションの順番をコントロールします。

const tlAnimation = new TimelineMax(); //tlAnimationというタイムラインを作成

tlAnimation.to('.circle', 2, { x: 100 })
.to('.square', 0.5, { x:100 })
.to('.rectangle', 1, { x:100 });

上記のようにタイムラインを作成して取得した要素を.チェーンでつなぐことによってdelayの指定をすることなくアニメーションの順番を指定できます。

順番を指定しているのでアニメーションの時間にも影響を受けません。

実行結果

次回はeasingの設定です。

Javascript　初めてのGSAPアニメーションの使い方　その4　easing設定