GSAP3

2019.12.12 Meguro.es

JSアニメーションで遊ぶ!

GSAP大喜利チャレンジ

自己紹介

Yusuke Nakaya

  • 株式会社オロ
  • プレイングマネージャー
  • Vue.js / Nuxt.js
  • CSSアニメーション好き、Meguro.css運営
  • クルマ、スノボ、ゲーム、映画、アニメ

GSAP3のデモ3つ

※Pug, Sass(SCSS), Vue.jsを使用

今日話すこと

What's GSAP3?

GSAP3

GreenSock, Inc.

 

TweenMax のメジャーアップデート

2019.11.10 にバージョン 3 をリリース 🎉

何が変わった?

  1. ライブラリ容量が半分くらい軽量になったぽい
  2. 新しいAPI仕様でコードがシンプルになった
  3. MotionPathPluginが直感的で楽しい
  4. 地味だけどUtility Methodsが便利っぽい

チェンジログはすっ飛ばして

今できる楽しさだけ伝えたい

1/3

Responsive Snow Field

雪が舞うアニメーション

POINT

  • GSAPの使い方
  • Utility Methodsの使い方
  • プロパティが別なら多重OK

伝えたいこと

gsap.to(element, { param })

の基本形でとりあえず動くよ

 

gsap.utils.*

は15種類もあって便利かも → ドキュメント

2/3

Wave Boxes

3Dの箱が波立ちながら登り続けるループアニメーション

  • stagger機能の使い方
  • 3DTransformsも使える

POINT

  • よろめき
  • ぐらつき
  • ふらふら

stagger

伝えたいこと

gsap.to(element, { stagger: { param } })

で複雑な動きもラクに指定できるよ

 

gsap.to(element, { rotationX: 360 })

など3DTransformsも使えるから3Dで遊べるよ

ただし

scaleZだけ使えない

この横暴について@greensockに聞いてみた

@greensock

「え?使い道ある?」

scale3d使いたいとき

ある...よね?

3/3

Formula1 in MONACO

F1マシンがモナコサーキットを走り回るアニメーション

  • MotionPathPluginの使い方

POINT

伝えたいこと

gsap.to(element, { motionPath: { path: <path> } })

でとりあえず<path>に沿って動くよ

 

MotionPathHelper.create(element)

のヘルパーで移動経路(パス)を確認できるよ

GSAP3大喜利

をやって感じたこと、まとめ

  • 実務レベルで簡単に使える
  • デフォルト設定でもわりとイイ感じになる
  • まだ日本語のhow to少なく大喜利チャンス
  • CodePenの公式デモが参考になる

GSAP3

END

Have a nice coding!

JSアニメーションで遊ぶ!GSAP3大喜利チャレンジ

By yusukenakaya

JSアニメーションで遊ぶ!GSAP3大喜利チャレンジ

Meguro.es#24 の発表資料です

  • 1,879
Loading comments...

More from yusukenakaya