自己紹介

Yusuke Nakaya

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

@s14garnet

Yusuke Nakaya

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