1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-06-01

前回の記事はこちら

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>

Image from Gyazo

上記のような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});

Image from Gyazo

パネル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の指定をすることなくアニメーションの順番を指定できます。

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

実行結果
Image from Gyazo

次回はeasingの設定です。

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

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?