WordPress、ShopifyなどのCMSやSPAにGSAPを導入する際は、単にスクリプトを読み込むだけでは十分ではありません。
CMSでは、記事一覧・商品リスト・スライダー・タブなど、ページ読み込み後にJavaScriptによって動的に生成されるコンテンツが存在します。

そのため、GSAPを導入する際は、ページロード直後の静的要素だけでなく、後から追加・変更される要素にもアニメーションを正しく適用できるように設計する必要があります。

また、Swiperなどのスライダーやタブ切り替えコンポーネントのように、DOMを動的に生成・複製するJavaScriptライブラリを併用するケースも多くあります。これらは要素構造が書き換わるため、GSAPのトリガーやアニメーション設定がずれる原因になります。

これらを想定して正しくGSAPを使うことで、スクロールアニメーションが意図せず動かない、Swiperなどの動的スライドでフェードアップしない、といったトラブルを未然に防ぐことができます。

導入手順

WordPressテーマ内でGSAPを使う場合、functions.phpファイルでGSAPを読み込みます。今回は公式CDNを使用します。

1.functions.phpに以下を記述する
wp_enqueue_script()関数を使って、CDNからファイルを読み込みます。

function gsap_script() {
  // GSAP本体
  wp_enqueue_script( 'gsap-js', 'https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js', array(), false, true );
  // プラグインを使う場合（今回はScrollTriggerを使用）
  wp_enqueue_script( 'gsap-scrolltrigger', 'https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js', array('gsap-js'), false, true );
  // 自作のアニメーションファイル
  wp_enqueue_script( 'common-js', get_template_directory_uri() . '/js/common.js', array('gsap-js'), false, true );
}
add_action('wp_enqueue_scripts', 'gsap_script');

上記のように登録しておけば、GSAPを使えるようになります。

※必ずGSAP本体、GSAPプラグイン、自作アニメーションファイルの順に記述してください。
※子テーマの場合は、get_template_directory_uriをget_stylesheet_directory_uriに変えてください。

2./js/common.jsを作成
jsフォルダの中にcommon.jsを作成し、このファイルに以下のコードを記述します。
ファイル構造はこのようになりました。（functions.phpと同じ階層にjsフォルダを作成しました）

今回はセクションが画面に入ってからフェードアップするアニメーションを作成します。

gsap.registerPlugin(ScrollTrigger);

function initFadeUp() {
  gsap.utils.toArray(".fade-up").forEach((el) => {
    gsap.from(el, {
      y: 80,
      opacity: 0,
      duration: 1,
      ease: "power1.out",
      scrollTrigger: {
        trigger: el,
        start: "top 80%",
        toggleActions: "play none none reverse",
      },
    });
  });
}

document.addEventListener("DOMContentLoaded", initFadeUp);

3.対象の要素にクラスを付ける
最後に任意のHTMLでフェードアップさせるセクションに、fade-upクラスを付けます。

<section class="fade-up">
  <h2>GSAPでフェードアップ</h2>
  <p>スクロールに合わせてふわっと出現します。</p>
</section>

すると、セクションが画面に入ってからフェードアップするアニメーションができます！
導入から実際にアニメーションを作成して動かすまで、3ステップで可能です。

ShopifyテーマでもGSAPを簡単に導入することができます。
最も簡単なのは、テーマに直接 <script> タグを記述する方法です。

導入手順

1.編集画面を開く
Shopify管理画面で 「オンラインストア＞テーマ」 を選択します。使用中のテーマの 「カスタマイズ」 をクリックします。

2.コード編集画面を出す
画面左上の…をクリックして「コードを編集」をクリックします。

3.GSAPのCDNを読み込む
layout/theme.liquidファイルの中の、</body>タグ直前に以下を追加します。

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

必要に応じてGSAPプラグインを追加してください。

4.GSAPのコードを記述する
3の直後に書くか、別のJSファイルを用意して、アニメーションのコードを記述します。

<script>
gsap.registerPlugin(ScrollTrigger);
gsap.from(".fade-up", {
  y: 30,
  opacity: 0,
  duration: 0.8,
  scrollTrigger: {
    trigger: ".fade-up",
    start: "top 80%",
    toggleActions: "play none none reverse",
  },
});
</script>

5.対象の要素にクラスを付与する
最後にアニメーションを適用させる要素に4で指定したクラスを付ければ完了です！

CMSやJavaScriptライブラリを使ったサイトでは、Ajaxでコンテンツが追加されたり、Swiperやタブ切り替えで要素が動的に生成される場合があります。
このような動的DOMに対しても、GSAPのアニメーションは基本的に動作しますが、意図した通りに正確なタイミングで動かすためには再初期化と再計算（ScrollTrigger.refresh()）が必要です。

再初期化は追加された要素や、まだアニメーションが設定されていない要素にアニメーションを適用するために行います。
一方、再計算は画面リサイズやコンテンツ追加などで要素の位置や高さが変わった場合に、スクロール位置に応じたアニメーションの発火タイミングを正しくするために行います。

なぜ再初期化・再計算が必要か

1.ScrollTriggerのトリガー位置を正しくするため

• Ajaxでコンテンツが追加されたり、Swiperでスライドが複製された場合、スクロール開始位置や終了位置がずれることがあります。
• これを防ぐため、追加要素にはアニメーションを再初期化し、ScrollTrigger.refresh()でトリガー位置を再計算します。

2.複数回アニメーションを適用する場合の安全のため

• 後から追加された要素に再度アニメーションが適用されても、既存要素と重複しないようdata-gsap-initなどで管理します。
• これにより、意図しない重複アニメーションを防ぐことができます。

3.非表示から表示される要素への対応

• Swiperやタブ切替など、非表示だった要素が表示された場合、正しいスクロール位置でアニメーションを開始するために再初期化が有効です。

Swiperを使用する場合の実装例

gsap.registerPlugin(ScrollTrigger);
// フェードアップアニメーションを初期化
function initAnimations(targets) {
  targets.forEach((el) => {
    if (!el.dataset.gsapInit) {
      el.dataset.gsapInit = true;
      // アニメーション内容は省略
      gsap.from(el, {
        scrollTrigger: {
          trigger: el,
          start: "top 80%",
          toggleActions: "play none none reverse",
        },
      });
    }
  });
}

// Swiper初期化
function initSwiper() {
  const swiper = new Swiper(".swiper", {
    loop: true,
    pagination: { el: ".swiper-pagination", clickable: true },
    navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" },
    on: {
      init: () => {
        // Swiper初期化後にアニメーションを初期化
        initAnimations(document.querySelectorAll(".fade-up"));
        // トリガー位置を再計算
        ScrollTrigger.refresh();
      },
      slideChange: () => {
        // スライド切替時にも再計算
        ScrollTrigger.refresh();
      },
    },
  });
}

// DOM読み込み後にSwiperを初期化
document.addEventListener("DOMContentLoaded", () => {
  initSwiper();
});

なお、ここで紹介したGSAPの導入や再初期化・再計算の考え方は、WordPressやShopifyに限らず、他のCMSやSPAでも基本的に同じです。
DOMが動的に生成・変更される環境では、アニメーションの再初期化とScrollTrigger.refresh()による再計算が重要になります。

GSAPをWordPress・Shopifyで導入する方法を紹介しました。
また、AjaxやSwiperなどで生成される動的DOMへの対応も重要です。
追加要素には再初期化を行い、ScrollTriggerのトリガー位置は再計算することで、安定したアニメーションが実現できます。
まずはこの記事のサンプルコードを参考に、安全な導入方法を実践してみてください！

【関連記事】

▼GSAPの導入方法や、アニメーションの作り方を知りたい方はこちら
GSAP入門編｜アニメーションの作り方を解説

▼GSAPの基礎や特徴、事例を知りたい方はこちら
GSAPの基礎と特徴を徹底解説｜事例から学ぶ活用法