前回の記事はこちら
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のラベルと同期処理です。