フリーランス 個人事業 ZA-ONE

【保存版】GSAP入門｜コーダーがハマる理由と基本の使い方・実例つき

こんにちは、フロントエンドエンジニアの田中です。

今回は、アニメーションライブラリ、GSAP（GreenSock Animation Platform）について紹介したいと思います。

もともと僕もjQueryの`.fadeIn()`や`.slideToggle()`で満足していた時期があったんですが、 ある日クライアントに「もっと動きの滑らかな、プロっぽいアニメーションできませんか？」と言われて焦りまして…

そこで出会ったのが GSAP。
触ってみたら、これがまぁ…めちゃくちゃ気持ちいい動きができる！

✅ GSAPってどんなアニメーションライブラリ？

GSAPは、JavaScriptベースの超高性能なアニメーションライブラリです。 公式サイトいわく、プロレベルの表現が必要な場面に対応できるとのことで、実際その通り。

  • DOM、SVG、Canvas など幅広く対応
  • スクロール連動、タイムライン制御も簡単
  • 軽量かつ超高速。しかも柔らかい動きが作れる

下記のようなコードで、数行でアニメーションが始まります：

gsap.to(".box", {
  x: 100,
  duration: 1,
  ease: "power2.out"
});

jQueryの `.animate()` に慣れてる人でも、違和感なく移行できる書き心地です。

✅ 実際に作ってみて感動したこと

個人的に一番感動したのは、タイムラインで複数のアニメーションを同期制御できるところ。

const tl = gsap.timeline();
tl.to(".title", {opacity: 1, y: 0, duration: 0.8})
  .to(".subtitle", {opacity: 1, y: 0, duration: 0.8}, "-=0.5");

上のコードで、タイトルとサブタイトルが綺麗にずれて登場します。 クライアントに「なんか映画のオープニングみたいですね！」って褒められました（笑）

✅ どんな場面で使える？

  • ヒーローバナーやキービジュアルの演出
  • スクロール連動で要素をフェード/スライド
  • SVGロゴやパスアニメーション

最近のLPやキャンペーンサイトでは、GSAPなしでは演出が物足りなく感じるレベルです。

💡 まとめ：GSAPは“コーダーの武器”になる

CSSアニメーションやjQueryだけじゃ物足りない…でもReactやCanvasはちょっと重い…

そんな時にGSAPは、ちょうどいい「武器」になります。

最初はちょっとクセがあるかもしれませんが、慣れてくると「これが標準でよくない？」って思えるレベル。 僕も今では、アニメーション案件ではGSAP一択になりました。

まだ触ったことがない方は、ぜひ公式ドキュメントから入ってみてください。 きっと「あ、これ楽しい！」ってなるはずです。