前回の記事はこちら
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>
上記のようなhtmlをTweenMax.toで動かしてみます。
TweenMax.to('.circle', 1, {x: 100});
TweenMax.to('.square', 1, {x: 100, delay: 1});
TweenMax.to('.rectangle', 1, {x: 100, delay: 2});
パネル1→3に向かってアニメーションをコントロールしていますが
秒数指定では要素が増えるほど記述が煩雑になります。
そこで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の設定です。