MENU
Web制作を仕事にする
  1. ホーム
  2. Web制作
  3. WebアニメーションをGSAPでつくろう｜導入〜基本

WebアニメーションをGSAPでつくろう｜導入〜基本

広告
Web制作 技術メモ

Webサイトアニメーションを作るのに便利なライブラリのGSAPですが、なかなか導入ハードルが高い気がしませんか？

なにか名前は聞いたことあるけど使ったことないなぁ。

なんか難しそうだから避けてる。

すごいらしいけど何が出来るのかよくわかんないな〜。

この記事ではGSAPの基本情報から簡単な実装例を載せています。

気になっているけど使ったことない、ちょっと変わったアニメーションを作りたい、そんな風に考えている人は覗いてみてください。

2025年4月までは一部有料だったGSAPですが、Webflowに買収されて完全無償化になっています。

（出典：Webflow公式ブログ https://webflow.com/blog/gsap-becomes-free）

また、コードを全部覚えなくてもAIに実装してもらうことで大枠の実装が簡単にできます！

この記事を書いた人

ばく

  • 完全未経験からWeb制作学習
  • Web制作でフリーランス活動中

Web制作独学の歩み

ポートフォリオサイト

目次

GSAPとは？

アニメーションライブラリとして有名なGSAP(ジーサップ)ですが、正式名称はGreenSock Animation Platform(グリーンストックアニメーション)といいます。

Webサイトでよく見かける「スクロールに連動した動き」や「要素がふわっと浮き上がる演出」「追従するアニメーション」さらには、複雑な3D風のアニメーションまで、GSAPを使えば短いコードで表現できます。

GoogleやAppleといった世界的な大企業のサイトでも広く採用されている、まさに「業界標準」のツールです。

よっぽど特殊なアニメーションで無ければ実装できるイメージでいいと思います。

なんでわざわざGSAPを使うの？

ただアニメーションを実装するのであれば、CSSやjavascriptを使って実装できます。もっとライトなライブラリを使って実装したほうが、コード一行足すだけ、みたいな形で実装できます。

GSAPの強みは

複雑なタイムライン管理：「Aが動いた後にBが動き、最後にCが回転する」といった、順番に起こるアニメーションをCSSやjavascriptで書こうとするとタイミングの管理、時間の計算がトンデモなくなります。すこしのズレで全部崩れてしまう。
GSAPなら直感的に順番を制御できます。

動きが滑らか、パフォーマンス能力の高さ：ブラウザへの不可を最小限に抑えるよう最適化されているため、たくさんの要素を同時に動かしても画面がカクつきにくいです。

参考|https://gsap.com/js/speed.html

ブラウザの互換性：ブラウザごと挙動の違い(バグや独自の違い、特にsafari)をGSAPが裏側で吸収してくれるため、どのブラウザでも同じようにきれいに動きます。
GSAPの書き方でほとんどのCSSに対応している上に自動でブラウザに対応したプレフィックスをつけてくれます。

参考|https://gsap.com/community/forums/topic/38787-what-browser-versions-are-supported-by-gasp%EF%BC%9F/

GSAPで何が出来る？

すごいのわかったけど、結局何が出来るの？

といった疑問を持ちますよね。

出来ることが多すぎるし、組み合わせたらほんとに様々なアニメーションが作れるので、まずは機能を羅列します。

基本

  • Tween … 1個の動き（移動・回転・拡大・フェード）
  • Timeline … 複数の動きを時間軸でつなぐ
  • stagger（スタッガー） … 複数要素を少しずつ時間差で動かす（カードがパラパラ順番に出る）
  • イージング … 動きの緩急（バウンド・弾力・カスタム曲線）

こちらに詳細を詰め込みました。GSAPの見方、基本の動きについての解説をしています。

Dawn Code Life
WebアニメーションをGSAPでつくろう｜基本の動き | Dawn Code Life WebサイトアニメーションライブラリGSAP(ジーサップ)の基本の動きの解説です。 以前の記事で紹介した基本の動きについての詳細、覚えておきたいこと、実装例を載せています…

スクロール系（ScrollTrigger）

  • スクロール発火 … 下に来たらフワッと出る
  • ピン留め（pin） … スクロールしても画面に貼り付いて止まる
  • スクラブ（scrub） … スクロール量に連動してアニメが進む／戻る
  • パララックス … 背景と前景が違う速度で奥行き表現
  • 横スクロール（horizontal scroll） … 縦操作で画面が横に流れる
  • スナップ（snap） … スクロールが区切りごとにピタッと吸い付く

スクロールアニメーションの基本について書いています。

Dawn Code Life
WebアニメーションをGSAPでつくろう｜スクロール | Dawn Code Life 複雑なWebアニメーションを簡単に実装することの出来るライブラリ「GSAP」。 この記事ではGSAPでもサイト全体を大きく演出することの出来る「スクロール」に関する機能につ…

テキスト系（SplitText）

  • 文字バラ出し … 1文字ずつパラパラ
  • 行ごとフェード … 段落が行単位でせり上がる
  • スクランブル（ScrambleText） … 文字がガチャガチャ変化して確定（ハッカー風）

SVG・図形系

  • 線を描く（DrawSVG） … 手描き風に線が引かれる
  • 形が変わる（MorphSVG） … メニュー→×、図形A→B
  • パスに沿って動く（MotionPath） … 曲線軌道で飛ぶ

操作・物理系

  • レイアウト変化（Flip） … 一覧→詳細が滑らかに変形、サムネ拡大
  • ドラッグ（Draggable） … スワイプ操作・慣性カルーセル
  • 物理挙動（Inertia / Physics2D） … 投げたら慣性で滑って止まる

ページ全体系

  • ぬるぬるスクロール（ScrollSmoother） … ページ全体が慣性でなめらかに

ちょっと色々出来すてよくわからないですよね。

個人的にはスクロールに関わるアニメーションがGSAPの大きな導入メリットになると思います。

例えばAppleのページで見られるのはピン留め（pin）＋スクラブ（scrub）の合わせ技です。Appleの製品ページの定番。「画面に固定したまま、スクロール量に合わせて回転・拡大していく」。

名前だと pinned scroll animation / scroll-scrubbed sequence と呼ばれます。

参考|https://www.apple.com/jp/mac-mini/

マックミニ欲しくて見てただけなんですが。

GSAPの導入方法

GSAPの実装方法はCDNで読み込む方法。パッケージをダウンロードする方法、ZIPをダウンロードする方法の3種類があります。

それぞれの特徴、メリット、デメリット

導入方法どんな人・プロジェクト向け？メリットデメリット
① CDN初心者、LP、WordPress、サクッと試したい時HTMLに貼るだけで1秒で終わる。ネット環境がないと動かない。
② NPM / パッケージReact, Next.js, Viteなどのモダンな開発環境チーム開発や他のライブラリとの管理が楽。黒い画面（ターミナル）の操作が必要。
③ ZIPダウンロードネットに繋がらない環境、自社サーバーで完結させたい時外部サーバーの障害に影響されない。バージョンアップの手間が手動になる。

その中でもCDNで読み込む方法が一番お手軽ですのでまずはこちらで試してみるのをオススメします！

Vite、Next.js、Nust、Astroなどのモダンなフロントエンド環境、Webpackなどを使って環境をビルドする場合は、パッケージマネージャーを使ってインストールします。

ZIPファイルダウンロードが必要な環境は、外部から読み込みファイルを入れられない案件、自社サーバーで完結させる場合などです。

公式サイトのインストールヘルパーを使えば対応した環境に応じたコードを自動で作ってくれるので楽に実装できます！

参考｜https://gsap.com/docs/v3/Installation/

CDN版の導入

一番お手軽と思われるCDN版の導入を解説します。

「まずは手軽に試してみたい！」「WordPressなどのサイトにサクッと導入したい」という場合は、CDN（Content Delivery Network）を使うのが一番早いです。

HTMLファイルの </body> 閉じタグの直前に、以下のコードを貼り付けるだけで準備完了です。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>

  <script src="main.js"></script>
</body>

＼コピペ用／

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12/dist/gsap.min.js"></script>

導入はこれだけで完了です！

GSAPの実用例

テキストだけじゃよくわからないと思うので実例です。

一番基本、下からフェードしながら出る、フェードアップの実装です。

GSAP
コード全文：解説

javascriptにあるgsap.from() は「この状態から今の位置へ」動かす書き方です。y:60（下から）とopacity:0（透明から）を指定するだけで、ふわっと登場が完成します。easeで動きの緩急も変えられます。

fromで指定した状態から、CSSの状態へ移行するといったイメージですね。

<div class="gsap-demo1">
  <div class="gsap-demo1__box">GSAP</div>
 </div>

.u-overflow-hidden {
  overflow: hidden !important;
}

.gsap-demo1{
  text-align:center;
  padding:40px 20px;
  background:#F5F5F5;
  border-radius:12px
}

.gsap-demo1__box{
  width:120px;
  height:120px;
  margin:0 auto 24px;
  background:#5C7A92;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  font-weight:bold;
  font-size:22px
}

.gsap-demo1__btn{
  padding:10px 28px;
  border:none;
  border-radius:8px;
  background:#5C7A92;
  color:#fff;
  font-weight:bold;
  cursor:pointer;
  font-size:15px
}
(function(){
  function run(){
    document.querySelector('.gsap-demo1__btn').addEventListener('click',function(){
      gsap.from('.gsap-demo1__box',{y:60,opacity:0,duration:1,ease:'power2.out'});
    });
  }
  if(window.gsap){run();}else{var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js';s.onload=run;document.head.appendChild(s);}
})();

時間差で順番に出てくる(stagger)

カードが一枚ずつ出てくる、モダンな演出を出せる。

1 2 3 4
コード全文：解説

複数要素を一括指定して、stagger:0.15 を足すだけ。これで「0.15秒ずつズラして順番に」動きます。数字を変えれば間隔も自在。手作業でdelayを1個ずつ書く必要がないのがGSAPの楽さです。

<div class="gsap-demo2">
  <div class="gsap-demo2__row">
    <span class="gsap-demo2__card">1</span>
    <span class="gsap-demo2__card">2</span>
    <span class="gsap-demo2__card">3</span>
    <span class="gsap-demo2__card">4</span>
  </div>
  <button class="gsap-demo2__btn" type="button">▶ 再生</button>
</div>

.gsap-demo2 {
  text-align: center;
  padding: 40px 20px;
  background: #F5F5F5;
  border-radius: 12px;
}
.gsap-demo2__row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 24px;
}
.gsap-demo2__card {
  width: 64px;
  height: 64px;
  background: #5C7A92;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: bold;
  font-size: 20px;
}
.gsap-demo2__btn {
  padding: 10px 28px;
  border: none;
  border-radius: 8px;
  background: #5C7A92;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  font-size: 15px;
}

(function () {
  function run() {
    document.querySelector('.gsap-demo2__btn').addEventListener('click', function () {
      gsap.from('.gsap-demo2__card', {
        y: 40,
        opacity: 0,
        duration: 0.6,
        stagger: 0.15,
        ease: 'power2.out',
      });
    });
  }
  if (window.gsap) {
    run();
  } else {
    var s = document.createElement('script');
    s.src = 'https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js';
    s.onload = run;
    document.head.appendChild(s);
  }
})();

スクロールで登場(ScrollTrigger)

スクロールアニメーション、スクロールトリガーというGSAPのプラグインを追加して実装します。

狙った要素が画面の決めた位置まで入ったら発動する、という言葉じゃよくわからないですが実物を見てください↓

↓ この中をスクロール ↓

box位置
Scroll Trigger 1
box位置
Scroll Trigger 2
box位置
Scroll Trigger 3
このラインに入ると発火！
コード全文：解説

ScrollTriggerプラグインを読み込み、triggerに対象、start:'top 80%'（要素の上端が画面8割の位置に来たら）で発火。スクロール連動アニメがこれだけで作れます。GSAPの真骨頂はこの機能です。

<div class="box">Scroll Trigger 1</div>
<div class="box">Scroll Trigger 2</div>
<div class="box">Scroll Trigger 3</div>
.box{
  width:80%;max-width:360px;margin:50px auto;padding:40px 0;
  text-align:center;background:#5C7A92;color:#fff;
  border-radius:12px;font-weight:bold;font-size:20px;
}
gsap.registerPlugin(ScrollTrigger);

gsap.utils.toArray('.box').forEach(function(box){
  gsap.from(box,{
    scrollTrigger:{
      trigger:box,        // 監視する要素
      start:'top 80%'     // box上辺が画面80%に来たら発火
    },
    y:60,                 // 60px下から
    opacity:0,            // 透明から
    duration:1,
    ease:'power2.out'
  });
});

まとめ

GSAPについての基本から、簡単な実装例までを紹介しました。

GSAPはさまざまな企業サイトでも使われている、アニメーションを実装するならマストなライブラリです。

GSAPを導入するメリットは、次のとおりです。

  • 動作が速くて軽い
  • さまざまなブラウザに対応している
  • 他のライブラリにはない複雑なアニメーションに対応している
  • 凝ったアニメーションも、簡単なコードで管理できる

ほぼすべてのCSSプロパティに対応していて、対応ブラウザに合わせて自動でベンダープレフィックスを付けてくれるので、バグチェックの手間を大きく省けます。

基本的なアニメーションから、スクロールに連動したもの、テキストに1文字ずつ当てるもの、ベクター画像（SVG）の変形、ページ全体に影響を与えるものまで。守備範囲がとにかく広いのが強みです。

これらを組み合わせれば、斜め移動（に見える動き）や、アイテムをその場で回転させる演出なども、スクロール連動で表現できます。

この記事では簡単な実装例だけを入れましたが、それぞれの詳しい使い方は各詳細ページで解説しています。

最後までご覧いただき、ありがとうございました！

Web制作 技術メモ
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

関連記事

コメント

コメントする

目次