GSAPでごりごりアニメーションするWordPressページを作る GSAP導入編

2025年7月16日公開 / 2025年7月21日更新

WordPressにGSAPを導入していきます

公式ドキュメントにてWordPressへの導入方法がピンポイントで紹介されているので、簡単に導入できます（ｱﾘｶﾞﾀｲ!

が、今回はおしごとで扱う構成に合わせ、TypeScriptを使用する方法で進めていきます🙇‍♂️

GSAP (+開発時に使用するもろもろ)をインストール

npm install --save-dev @wordpress/env esbuild npm-run-all sass typescript
npm install gsap

npm install --save-dev @wordpress/env esbuild npm-run-all sass typescript
npm install gsap

tsconfig.json の設定

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

※esbuildを使用してビルドするため、outDir, rootDirなどは設定せず、コマンドオプションでまとめて指定する

package.json の設定

package.json

{
  "name": "tararan.net",
  "version": "1.0.0",
  "scripts": {
    "wp-env": "wp-env start",
    "dev": "npm-run-all --parallel dev:sass dev:js",
    "dev:sass": "sass src/scss:tararan-theme/assets/css --watch --style=compressed --color",
    "dev:js": "esbuild src/ts/main.ts --bundle --format=esm --outfile=tararan-theme/assets/js/main.js --watch --minify",
    "build": "npm-run-all build:sass build:js",
    "build:sass": "sass src/scss:tararan-theme/assets/css --style=compressed --no-source-map",
    "build:js": "esbuild src/ts/main.ts --bundle --format=esm --outfile=tararan-theme/assets/js/main.js --minify"
  },
  "devDependencies": {
    "@wordpress/env": "^10.24.0",
    "esbuild": "^0.25.6",
    "npm-run-all": "^4.1.5",
    "sass": "^1.89.2",
    "typescript": "^5.8.3"
  },
  "dependencies": {
    "gsap": "^3.13.0"
  }
}

{
  "name": "tararan.net",
  "version": "1.0.0",
  "scripts": {
    "wp-env": "wp-env start",
    "dev": "npm-run-all --parallel dev:sass dev:js",
    "dev:sass": "sass src/scss:tararan-theme/assets/css --watch --style=compressed --color",
    "dev:js": "esbuild src/ts/main.ts --bundle --format=esm --outfile=tararan-theme/assets/js/main.js --watch --minify",
    "build": "npm-run-all build:sass build:js",
    "build:sass": "sass src/scss:tararan-theme/assets/css --style=compressed --no-source-map",
    "build:js": "esbuild src/ts/main.ts --bundle --format=esm --outfile=tararan-theme/assets/js/main.js --minify"
  },
  "devDependencies": {
    "@wordpress/env": "^10.24.0",
    "esbuild": "^0.25.6",
    "npm-run-all": "^4.1.5",
    "sass": "^1.89.2",
    "typescript": "^5.8.3"
  },
  "dependencies": {
    "gsap": "^3.13.0"
  }
}

※ 今回の構成では、 src/ts/main.ts でコーディングし、テーマディレクトリ(tararan-theme/assets/js/main.js) に出力するよう設定しています

※ sassも同時にwatchして開発するために、npm-run-all を使用しています

GSAPコード作成

使ってみたかったSplitTextで文字を１文字ずつずらして回してみる…

main.ts

import gsap from "gsap";
import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(SplitText);

window.addEventListener("DOMContentLoaded", () => {
  SplitText.create(".js_mv_tarara", {
    type: "chars",
    autoSplit: true,
    onSplit(self) {
      return gsap.to(self.chars, {
        duration: 0.5,
        rotate: 360,
        stagger: 0.05,
        repeat: 1,
      });
    },
  });
});

import gsap from "gsap";
import { SplitText } from "gsap/SplitText";
gsap.registerPlugin(SplitText);

window.addEventListener("DOMContentLoaded", () => {
  SplitText.create(".js_mv_tarara", {
    type: "chars",
    autoSplit: true,
    onSplit(self) {
      return gsap.to(self.chars, {
        duration: 0.5,
        rotate: 360,
        stagger: 0.05,
        repeat: 1,
      });
    },
  });
});

ビルドしたjsの読み込み

function.php

add_action('wp_enqueue_scripts', 'tararan_enqueue_scripts');
function tararan_enqueue_scripts()
{

    wp_enqueue_script(
        'main',
        get_theme_file_uri('assets/js/main.js'),
        array(),
        WP_DEBUG ? date("Ymdms") : wp_get_theme()->get('Version'),
        false
    );
    
... 省略

add_action('wp_enqueue_scripts', 'tararan_enqueue_scripts');
function tararan_enqueue_scripts()
{

    wp_enqueue_script(
        'main',
        get_theme_file_uri('assets/js/main.js'),
        array(),
        WP_DEBUG ? date("Ymdms") : wp_get_theme()->get('Version'),
        false
    );
    
... 省略

…完成！

コンテンツを増やさないとアニメーションさせるところ足りない😭