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

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

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

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

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

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

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

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

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

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

See the Pen GSAP by Web Navigator (@web-navigator) on CodePen.

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

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

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

ニュートンの電球

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

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

See the Pen Newton’s Light Bulbs 💡😎 by Web Navigator (@web-navigator) on CodePen.

まとめ

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

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

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

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

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

WEBさん

WordPressの不具合をなおす人

TwitterInstagramYouTubeContact

あなたのお仕事をする時間を使ってITに関することを調べたり、トライしてみたりして、それでもうまくいかない。そんなことはありませんか？ WEB先案内をご利用いただくと、困ったときにITの顧問としてあなたのITに関するお悩みにお答えし、サポートを行うことができます。