WebflowがGSAPを完全無料化｜テキストアニメーション実装ガイド

Webサイトに高品質なアニメーションを実装したいと思いつつ、「GSAPは有料プラグインが多くてコストがかかる」「設定が複雑で使い始めるハードルが高い」と感じていた方も多いのではないでしょうか。

2025年4月、Webflowはその状況を一変させる発表を行いました。JavaScriptアニメーションライブラリの定番であるGSAP（GreenSock Animation Platform）を完全に無料化し、全ユーザーがすべての機能を追加費用なしで利用できるようになったのです。本記事では、この無料化の背景と意義、そして実際にWebflowでGSAPを使ってテキストアニメーションを実装する方法を詳しく解説します。

画像：スクリーンショット WebflowのプロジェクトSettings画面でGSAPのトグルがONになっており、SplitTextなどのプラグインが選択できる状態のスクリーンショット

GSAPの完全無料化が意味すること

GSAPはこれまで基本機能こそ無料でしたが、ScrollTrigger、SplitText、DrawSVGPlugin、MorphSVGPluginなど高度なプラグインは「Club GreenSock」という有償メンバーシップでのみ利用可能でした。Webflowは2024年秋にGSAPを買収し、その後2025年4月にこれらすべてのプラグインを完全無料で提供することを発表しました。

この変更によって大きく変わる点が2つあります。ひとつはコスト面です。フリーランスのWebデザイナーから大企業のWeb担当者まで、誰でもコストを気にせず高度なアニメーションをあらゆるプロジェクトで使えるようになりました。商用利用も標準ライセンスでカバーされています。もうひとつはWebflowとの統合です。GSAPのコアライブラリとプラグインがWebflowによって直接ホストされるようになり、外部からライブラリを読み込む設定が不要になりました。GSAPをWebflowのInteractions機能と組み合わせた高度な演出については、WebflowインタラクションとGSAP統合ガイドも参照してください。

合わせて、カスタムコードを公開前にプレビューで確認できる機能も追加されています。GSAPで作成したアニメーションが実際にどう動くかをプレビュー段階で確認できるため、試行錯誤の手間が大幅に減ります。

SplitTextプラグインの大幅アップグレード

今回の無料化と同時に、最も人気の高いプラグインのひとつであるSplitTextが全面的に書き直され大きく改良されました。ファイルサイズが50%削減されてパフォーマンスが向上したほか、スクリーンリーダーに対応したアクセシビリティが組み込まれました。さらに、テキストを美しく表示する「リビール」効果を簡単に実現するマスキング機能も追加されています。

SplitTextは文字・単語・行の3つの単位でテキストを分割し、それぞれに個別のアニメーションを設定できるプラグインです。文字単位（Characters）では1文字ずつのタイピング効果、単語単位（Words）では単語が順番にフェードインする表現、行単位（Lines）では各行がスライドインするダイナミックな演出が可能です。

画像：スクリーンショット Characters/Words/Linesの3種類のSplitTextアニメーションの違いがわかる比較スクリーンショットまたは図解

WebflowでGSAPを使ったテキストアニメーションの実装手順

それでは実際に、WebflowでGSAPとSplitTextを使ってキャッチコピーにテキストアニメーションを追加する方法を解説します。

ステップ1：GSAPとSplitTextを有効化する

Webflowのプロジェクト設定を開き、GSAPのセクションを探します。「GSAP Core is included on this site」のトグルをONに切り替え、テキストアニメーションに使用するSplitTextにチェックを入れます。変更を保存すれば準備完了です。外部からライブラリを読み込む必要はなく、これだけでGSAPが使える状態になります。

ステップ2：アニメーション対象の要素にクラスを付与する

アニメーションを適用したいテキスト要素を選択し、スタイルセレクターにクラス名を追加します。今回の例では「split」というクラス名を使用します。このクラス名は後のコードで使用するため、わかりやすい名前を付けておきましょう。クラス管理を効率化したい場合は、CSS関数変数との組み合わせも有効な手段です。

ステップ3：JavaScriptコードをPage Settingsに追加する

アニメーションを追加したいページの設定を開き、「Before </body> tag」の欄に以下のコードを貼り付けます。Webflowには既にGSAPが組み込まれているため、CDNのscriptタグを別途追加する必要はありません。

<script>
  document.addEventListener("DOMContentLoaded", () => {
    gsap.registerPlugin(SplitText);

    // フォント読み込み完了を待つとズレが出にくい
    document.fonts.ready.then(() => {
      const split = SplitText.create(".split", { type: "words" });

      gsap.from(split.words, {
        duration: 1,
        y: 150,
        autoAlpha: 0,
        stagger: 0.15,
        ease: "power3.out" // 動きが自然になる
      });
    });
  });
</script>

‍


このコードは、.splitクラスを持つ要素のテキストを単語単位で分割し、下から150px上に移動しながら透明→不透明へとアニメーションします。stagger: 0.15により、単語が0.15秒ずつ遅れながら順番に表示される効果が生まれます。

画像：スクリーンショット WebflowのPage SettingsにあるBefore body tagの入力欄にJavaScriptコードを貼り付けた状態のスクリーンショット

アニメーションのカスタマイズ方法

基本的なアニメーションが動いたら、各プロパティを調整して表現を磨きましょう。主なカスタマイズポイントを紹介します。

durationはアニメーション全体の時間（秒）で、数字を大きくするとゆっくり、小さくすると素早い動きになります。yは縦方向の移動距離（px）で、マイナスにすると上から下への動きになります。staggerは要素ごとの開始遅延時間（秒）で、0に近いほど一斉に動き、大きくするほど連続的なアニメーションになります。easeを指定することで加速・減速のカーブを変えられます。power2.outはなめらかに減速する効果です。

1つのページで複数のSplitTextアニメーションを使いたい場合は、変数名（splitの部分）とクラス名をそれぞれ別の名前に変えてコードを複数記述することで対応できます。

まとめ

WebflowによるGSAPの完全無料化は、高品質なWebアニメーションを誰でも手軽に実装できる環境を整えた画期的な一歩です。これまでコストや技術的なハードルから手を出せなかった方も、今回をきっかけにGSAPを活用したアニメーション表現に挑戦してみることをおすすめします。

SplitTextを使ったテキストアニメーションは、ファーストビューのキャッチコピーに動きを加えるだけでも、サイト全体の印象を大きく変えます。アニメーションと並行してホバーエフェクトも設定すると、インタラクティブな体験がより豊かになります。本記事の手順を参考にしながら、ぜひWebflowサイトにアニメーションを取り入れてみてください。Booostでは、Webflowを活用したサイト制作や演出の実装についてもサポートを行っております。お気軽にご相談ください。