Javascript

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

今回は、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)

その他にも機能が沢山

今回まとめきれていませんが、他にも沢山の機能が追加されています。
以下から更新点を確認できます。

https://greensock.com/3-release-notes/

【GSAP 3】を使用したデモ

GSAP 3 Cube Swimmer Wave Stagger

「grid」全体には「random」が使われていて、全体がフワフワしているように見えます。「cube」の波打ちも面白いですね。

See the Pen GSAP 3 Cube Swimmer Wave Stagger by Pete Barr (@petebarr) on CodePen.light

GSAP 3.0 – SVG Wavy Lines (v2)

「GSAP 3」と合わせて「DrawSVGPlugin3」が使用されています。
SVGパスならではの曲線アニメーションがきれいです。

See the Pen GSAP 3.0 – SVG Wavy Lines (v2) by Tom Miller (@creativeocean) on CodePen.light

GSAP 3 demo – Cubes

「three.js」と合わせてGSAPアニメーションが使用されていて、立体感のあるアニメーションになっています。

See the Pen GSAP 3 demo – Cubes by Szenia Zadvornykh (@zadvorsky) on CodePen.light

GSAP 3 & ETC Crinkled Variable Font

「GSAP」の文字が髪のように折れたり伸びたりするアニメーション。
マウス追従で動きがある点も参考にしたいですね。

See the Pen GSAP 3 & ETC Crinkled Variable Font by Pete Barr (@petebarr) on CodePen.light

GSAP 3 & ETC Variable Font Caterpillar

英語の文字が横に波打ったように見えるアニメーション。

See the Pen GSAP 3 & ETC Variable Font Caterpillar by Pete Barr (@petebarr) on CodePen.light

GSAP 3 Logo Playground

「GSAP 3」のオープニングKVに使用されているアニメーションです。
SVG用に「DrawSVGPlugin3」「MorphSVGPlugin3」「MotionPathPlugin」が使用されています。

See the Pen GSAP 3 Logo Playground by GreenSock (@GreenSock) on CodePen.light

Alien Abduction

UFOが羊を連れて行ってしまうアニメーション。「MotionPathPlugin」が使用されています。

See the Pen Alien Abduction by Cassie Evans (@cassie-codes) on CodePen.light

GSAP 3 Cube Walk

キューブが歩いているように見えるアニメーション。

See the Pen GSAP 3 Cube Walk by Pete Barr (@petebarr) on CodePen.light

GSAP 3 Cube Stripe Loader

ラインと光が綺麗なアニメーション。ローディングでも使用できそうです。

See the Pen GSAP 3 Cube Stripe Loader by Pete Barr (@petebarr) on CodePen.light

Low Poly Experiment

フラスコとスポイトで中の水の色が変わるアニメーション。
「CustomEase3」「CustomWiggle3」でイージングや波長をカスタマイズされています。

See the Pen Low Poly Experiment by Chris Gannon (@chrisgannon) on CodePen.light

最後に

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

さらに使いやすく、軽量になっているので新しいプロジェクトにも取り入れていきたいですね。

参考サイト

https://greensock.com/3/
https://tympanus.net/codrops/2019/11/14/the-new-features-of-gsap-3/
https://greensock.com/gsap3-features/
https://codepen.io/collection/7a84da7eadcea7b5a4ed8f8430c597fd