Javascript　初めてのGSAPアニメーションの使い方　その6　TweenMax.setとTimelineMaxプロパティ

9805 ワード
gsap JavaScript jQuery JavaScript テキストリンク

前回の記事はこちら
Javascript　初めてのGSAPアニメーションの使い方　その5　staggerTo/staggerFrom

今回はTweenMax.setとTimelineMaxのプロパティーを
組み合わせたアニメーションについて説明します。

TweenMax.set

今回使用するhtmlは以下です。
※CSSで配置調整と色付けしています。

      <div class="column col5">
        <p>パネル 5 (.oval)</p>
        <div class="oval shape"></div>
      </div>

jsシートに以下を記述します

TweenMax.set('.oval', { x: -100});

実行結果

TweenMax.setを使用することによってアニメーションの初期位置をずらすことができます。
※この段階ではアニメーションはしません。
CSSのtransform: translate();と同じ意味です。

TimelineMaxのプロパティ

ここからTimelineMaxを使用してアニメーションを設定しています。
まずは繰り返しを３回にしてみます。

TweenMax.set('.oval', { x: -100});

const tlAnimation = new TimelineMax({ repeat:3 }); //繰り返しを３回に設定
tlAnimation.to('.oval', 0.5, { x: 100 })
.to('.oval', 0.5, { x: -100});

実行結果

タイムラインでx軸方向に100px,動かしてから-100px方向に動かす処理を入れています。
ここで気をつけるのは基準位置は.setで取得したx:-100にはならず
htmlで設定した位置になるという点です。

そのため見た目には最初の動き幅は200px動きますが実際に指定するのは左右100pxです。

回数制限なく繰り返す場合は数値に-1を入れます。なんとなくrepeat:trueにしたくなりますが
それでは無制限にならないので注意しましょう。

TweenMax.set('.oval', { x: -100});

const tlAnimation = new TimelineMax({ repeat:-1 });
tlAnimation.to('.oval', .5, { x: 100 })
.to('.oval', .5, { x: -100});

実行結果

プロパティにrepeatDelayを入れるとリピート間隔の指定（秒）になります。

TweenMax.set('.oval', { x: -100});

const tlAnimation = new TimelineMax({ repeat:-1, repeatDelay:2 }); //２秒の間隔を開けて繰り返し（無制限）
tlAnimation.to('.oval', .5, { x: 100 })
.to('.oval', .5, { x: -100});

プロパティにyoyo:trueを入れると名前の通りヨーヨーの動きになります。

TweenMax.set('.oval', { x: -100});
const tlAnimation = new TimelineMax({ repeat:-1, yoyo: true });
tlAnimation.to('.oval', 1, { x: 100 })

次回はTimelineMaxのラベルと同期処理です。

Javascript　初めてのGSAPアニメーションの使い方　その7　TimelineMaxのラベルと同期処理