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

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

前回の記事はこちら

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

easingの設定

今回はeasingのプロパティを設定していきます。
htmlは前回と同じです(CSSにて色付けしています)

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

前回のjsシートで作成したTimelineMaxにeasingを設定していきます。

Liniar.ease

まずはLinear.easeNoneを動かしてみます。

const tlAnimation = new TimelineMax();

tlAnimation.to('.circle', 1, { x: 100, ease: Linear.easeNone })
.to('.square', 1, { x:100, ease: Linear.easeNone })
.to('.rectangle', 1, { x:100, ease: Linear.easeNone });

Linear.easeNoneは名前の通り無機質な一定の動きでeasingします。

Power2.easeOut

次はPower2.easeOutの動きです。


tlAnimation.to('.circle', 1, { x: 100, ease: Power2.easeOut })
.to('.square', 1, { x:100, ease: Power2.easeOut })
.to('.rectangle', 1, { x:100, ease: Power2.easeOut });

easeOutは動き出しが早く終了に向けてゆっくりに変化します。
power2の数字を大きくすると全体のスピードが変わります。

Power2.easeIn


tlAnimation.to('.circle', 1, { x: 100, ease: Power2.easeIn })
.to('.square', 1, { x:100, ease: Power2.easeIn })
.to('.rectangle', 1, { x:100, ease: Power2.easeIn });

easeInは動き出しが遅く終了に向けて加速します

Power4.easeOut

Powerの数字を最大の４に変えてみます。
（０〜4)で設定可能です。

tlAnimation.to('.circle', 1, { x: 100, ease: Power4.easeOut })
.to('.square', 1, { x:100, ease: Power4.easeOut })
.to('.rectangle', 1, { x:100, ease: Power4.easeOut });

easeOutの動きは同じですが全体のスピードが早くなりました。

Back.easeOut

tlAnimation.to('.circle', 1, { x: 100, ease: Back.easeOut })
.to('.square', 1, { x:100, ease: Back.easeOut })
.to('.rectangle', 1, { x:100, ease: Back.easeOut });

Backを指定するとアニメーションは少しオーバーしてから戻る動きになります。

Elastic.easeOut

tlAnimation.to('.circle', 1, { x: 100, ease: Elastic.easeOut })
.to('.square', 1, { x:100, ease: Elastic.easeOut })
.to('.rectangle', 1, { x:100, ease: Elastic.easeOut });

Elasticはガタッと落ちてきたようなアニメーションを加えることができます

Bounce.easeOut

tlAnimation.to('.circle', 1, { x: 100, ease: Bounce.easeOut })
.to('.square', 1, { x:100, ease: Bounce.easeOut })
.to('.rectangle', 1, { x:100, ease: Bounce.easeOut });

Bounceを設定すると名前の通り重力のあるバウンドのような動きをします。

GSAPのeasingドキュメントはこちらを確認ください

次回はstaggerTo/staggerFromです。

Javascript　初めてのGSAPアニメーションの使い方　その5　staggerTo/staggerFrom