【GSAP 3】の新機能と【Webアニメーション】スニペット集

2020-07-06

今回は、GreenSockから2019年にニューリリースされた【GSAP 3】の新機能と【GSAP 3】を使用した【Webアニメーション】スニペットを紹介していきます。

GSAP3ってなに？

Webアニメーションを作成する時に、よくTweenMax、TweenLite、TimelineMaxなどを使うことがあるかと思います。それの新しいバージョンです。

TweenMaxより約半分のサイズに

【GSAP 3】ではサイズがさらに小さくなりました。TweenMaxの約半分のサイズとのこと。しかし機能は50以上増えています！（ほぼ全ての古い機能を保持）。GSAPのコアは最新のESモジュールで再構築されています。

APIの簡素化

【GSAP 3】では、TweenMax、TweenLite、TimelineMaxなどを使用するかどうかを決める必要がなくなりました。

単一の【gsap】オブジェクトに統合されました。

TweenMaxのコードの書き方

TweenMax.to(".hoge", 2, {
  scale: 0.4,
  y: 15,
  ease: Elastic.easeOut.config(1, 0.2),
});

【GSAP 3】のコードの書き方

gsap.to(".hoge", {
  duration: 2,
  scale: 0.4,
  y: 15,
  ease: "elastic(1, 0.2)",
});

TweenMaxなどの互換性

【GSAP 3】は、古い構文にも対応しています。レガシーコードの大部分はそのまま使用することができますが、新しいプロジェクトを始める時は、新しい構文にシフトすることをお勧めしています。

継承できるタイムラインのデフォルト

以前は、長いアニメーションを作成するときに、各要素に、イージングやデュレーションなどの同じプロパティを追加する必要がありました。

【GSAP 3】の新機能としてデフォルトのプロパティを設定することが出来るようになりました。タイムラインでプロパティを指定しない限りすべての要素に適用されます。

この機能により。タイムラインアニメーションの記述を減らすことができます。

旧コードのタイムラインの書き方

var tl = new TimelineMax();
tl.to(obj1, 3, { ease: Power1.easeInOut, rotation: -90 })
  .to(obj2, 3, { ease: Power1.easeInOut, rotation: -270 })
  .to(obj3, 3, { ease: Power1.easeInOut, rotation: -90 });

【GSAP 3】のタイムラインの書き方

var tl = gsap.timeline({ defaults: { ease: "power1.inOut", duration: 3 } });
tl.to(obj1, { rotation: -90 })
  .to(obj2, { rotation: -270 })
  .to(obj1, { rotation: -90 });

キーフレーム

CSSではおなじみのキーフレーム。【GSAP 3】でもキーフレーム配列を用意して順番に実行させることができます。

gsap.to(".hoge", {
  keyframes: [
    { x: 150, duration: 2 },
    { y: 300, duration: 3, delay: 0.5 },
    { rotation: 360, duration: 2, delay: -0.25 },
  ],
});

ランダム機能

【random】を使用して範囲や配列として定義すると、【GSAP 3】ではそれぞれに適切なランダムな値を出すことができます。

高度なランダム系のアニメーションもシンプルに作成することができます。

gsap.to(".class", {
  x: "random(-100, 100, 5)", //min,max,snap
});

x: "random([0, 100, 200, 500])"; //randomly selects one of the values (0, 100, 200, or 500)