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

前回の記事はこちら

[Javascript　初めてのGSAPアニメーションの使い方　その3　Timelinemax](https://qiita.com/fumiya0414/items/61e8b4dcd9f1fe218a07)

#easingの設定

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

```html
    <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を動かしてみます。

```javascript
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します。

[![Image from Gyazo](https://i.gyazo.com/96798f6dcf75eae2101cf1fdcbedc0f3.gif)](https://gyazo.com/96798f6dcf75eae2101cf1fdcbedc0f3)

##Power2.easeOut

次はPower2.easeOutの動きです。

```javascript

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 });

```

[![Image from Gyazo](https://i.gyazo.com/3c7440dd4d457c3a92523eeeecbe627d.gif)](https://gyazo.com/3c7440dd4d457c3a92523eeeecbe627d)

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

##Power2.easeIn

```javascript

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 });

```
[![Image from Gyazo](https://i.gyazo.com/c5fd6a4375f4cc632de474b3db3dcd3b.gif)](https://gyazo.com/c5fd6a4375f4cc632de474b3db3dcd3b)

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

##Power4.easeOut

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

```javascript
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 });

```

[![Image from Gyazo](https://i.gyazo.com/2bf7dd5ba4da1ef2672f7dcfe7039e52.gif)](https://gyazo.com/2bf7dd5ba4da1ef2672f7dcfe7039e52)

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

##Back.easeOut

```javascript
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 });

```

[![Image from Gyazo](https://i.gyazo.com/31b189d5c6b5d407fde583ba9957bbbe.gif)](https://gyazo.com/31b189d5c6b5d407fde583ba9957bbbe)

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

##Elastic.easeOut

```javascript
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 });
```

[![Image from Gyazo](https://i.gyazo.com/1ee7fd9a1343e71b263411c899ea2ae9.gif)](https://gyazo.com/1ee7fd9a1343e71b263411c899ea2ae9)

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

##Bounce.easeOut

```javascript
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 });

```

[![Image from Gyazo](https://i.gyazo.com/8bba229f7d6446c8923c4018a40719c6.gif)](https://gyazo.com/8bba229f7d6446c8923c4018a40719c6)

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

[GSAPのeasingドキュメントはこちらを確認ください](https://greensock.com/docs/v2/Easing)

次回はstaggerTo/staggerFromです。

[Javascript　初めてのGSAPアニメーションの使い方　その5　staggerTo/staggerFrom](https://qiita.com/fumiya0414/items/38c86d9a4df253005218)