GSAPについて勉強してみたよ

JavaScriptライブラリの「GSAPジーサップ」はウェブサイトのモーション制作に役立ちます。

簡単にいうとアニメーションを手軽に作れちゃいます。

ここでいう「手軽に」とは、ある程度HTML/CSS/JavaScriptを理解している人にとって手軽にという意味です。

GSAPは高機能であり、実行性能が良好で、互換性も高い利点があります。

JavaScriptでアニメーションを制御しますが、JavaScriptの知識がなくても扱えてしまうくらい、簡単にアニメーションが作れます。

始点と終点の間を補間することでモーションを実現することは「トゥイーン」と呼ばれます（Betweenが語源のFlash用語）。

トゥイーンの機能を提供するJSライブラリは多くの種類が存在しますが、その中でもGSAPは評判が高く、機能の多さでは群を抜いています。

GSAPでアニメーションを作ってみた

GSAPは、Webアニメーションの世界で長年「業界標準」と呼ばれてきたJavaScriptライブラリです。複数の動きを時系列に並べるタイムライン制御と、質の高いイージングが強みで、CSSだけでは苦しい「連鎖する複雑な動き」を宣言的に書けます。このページはその入門記録――クリックでタイルが回転するデモと、CodePenで見つけた作品の研究です。

「CSSで足りるか、GSAPが要るか」。この線引きができるようになることが、アニメーション実装の次のステップです。

クリックすると金色のタイルがクルッと回転する

「Result」下のRerunを押して動きを確かめてね！↑

使っているGSAPの機能（js画面参照）

No	機能名	説明
1	to	アニメーションのゴールの状態（動作の終わりの状態）を指定します (現在の状態からのアニメーション)
2	repeat	数値型 アニメーションを何回繰り返すかの指定します 1だと、通常の再生に加えて+1回繰り返します（つまり合計2回の再生します） デフォルト：0
3	yoyo	ブーリアン型 「true」にするとyoyoを有効化

ここまでで参考になったらシェアしてください

同じ症状で困っている方に届くと、調査時間を短縮できます。

X でシェア Facebook

CodePenで見つけた面白いGSAPアニメーション

ニュートンの電球

「ニュートンのゆりかご」をGSAPで作っている猛者がいましたのでご紹介します。

ずっと見ていられる楽しさがありますね❗️

まとめ

今回はGSAPについて基礎的な知識を身につけるため、

簡単なマウスアクションのアニメーションを作ってみました❗️

いかがだったでしょうか❓

紹介した内容以外にもGSAPにはたくさんの機能がありますので、

興味がある人は、ぜひ公式サイトなどで調べてみてください。