GSAPの保守性を上げるEffectsの紹介

こんにちは、株式会社TOKOSのスギタです！
今回はGSAPのPropatiesの中のEffectsについて紹介します。
初めて聞いた方も多くいると思います。
アニメーションのコード管理・保守性・再利用性を向上させてくれます！

はじめに
- 対象読者
Effectsの概要
- なぜEffectsが必要なのか？
Effectsの解説
さいごに

はじめに

対象読者

JavaScriptを用いたアニメーションに興味のある方

この記事で扱わない内容:

JavaScriptの基本的な仕様方法
GSAPの仕様やインストール方法

Effectsの概要

GSAPのEffects機能は、アニメーションのコード管理・保守性・再利用性を劇的に向上させる強力な機能です。大規模なWebプロジェクトや複数人での開発において、その真価を発揮します。

なぜEffectsが必要なのか？

従来のアニメーション実装では以下の問題が発生します！

JavaScript

// 悪い例：同じようなアニメーションがあちこちに散らばる
gsap.to(".modal", { duration: 0.3, opacity: 0, scale: 0.8, ease: "back.in" });
gsap.to(".popup", { duration: 0.3, opacity: 0, scale: 0.85, ease: "back.in" }); // 微妙に違う
gsap.to(".tooltip", { duration: 0.25, opacity: 0, scale: 0.8, ease: "back.in" }); // また微妙に違う

Effectsを使うことでこのような問題を解決できます。

統一性: 同じ効果を確実に再現
保守性: 一箇所の変更で全体に反映
可読性: 意図が明確になる

Effectsの解説

まずはEffectsを使用した例を紹介します。

JavaScript

// 1. Effectを登録
gsap.registerEffect({
  name: "fadeOut",                    // ① nameの登録
  effect: (targets, config) => {      // ② アニメーションの処理を書く
    return gsap.to(targets, {
      duration: config.duration,
      opacity: 0
    });
  },
  defaults: { duration: 1 }           // ③ デフォルト値を設定
});

// 2. Effectを使用
gsap.effects.fadeOut(".my-element");

上記のようにEffectを登録していく流れになります。
ここから① → ② → ③の解説をしてきます！

① nameの登録

これがエフェクトの名前になります。
一意である必要があります！
このnameが呼び出し時のメソッド名になります！

JavaScript

// 例
gsap.effects.fadeOut()

② アニメーションの処理を書く

ここがeffect関数の重要な部分になります！

effect: (targets, config) => {…} のように記述していきます！

引数の内容は以下になります。

targets
- アニメーションする要素（.my-elementが渡される）
config
- 実行時の設定（{ duration: 1 }などが渡される）

JavaScript

// 使用例
gsap.effects.fadeOut(".element", { duration: 2, delay: 0.5 });

またeffect内では必ずGSAPアニメーションを返す必要があります！

JavaScript

// 正しい例
effect: (targets, config) => {
  return gsap.to(targets, { ... }); // GSAPアニメーションを返す
}

// 間違った例
effect: (targets, config) => {
  gsap.to(targets, { ... }); // returnが無い
  // undefined が返される
}

③ デフォルト値を設定

呼び出し時に引数にConfigの値がなかった場合のデフォルト値になります！

JavaScript

// 上書きしたい時
gsap.effects.fadeOut(".element", { duration: 2 })

その他

呼び出し時は一部だけ上書きして呼び出すことも可能です！

JavaScript

gsap.registerEffect({
  name: "customFade",
  effect: (targets, config) => {
    return gsap.to(targets, {
      duration: config.duration,
      opacity: config.opacity,
      scale: config.scale,
      ease: config.ease
    });
  },
  defaults: {
    duration: 0.5,
    opacity: 0,
    scale: 0.8,
    ease: "power2.inOut"
  }
});

// 呼び出し時に一部だけオーバーライド
gsap.effects.customFade(".customFade", { 
  duration: 1.2 // 他はdefaultsが使用される
});

またTimelineも使用可能です！

JavaScript

gsap.registerEffect({
  name: "timeline",
  effect: (targets, config) => {
  const tl = gsap.timeline();

  tl.set(targets, { transformOrigin: "center center" })
    .to(targets, { duration: 0.1, scale: 1.1 })
    .to(targets, { duration: 0.2, scale: 1, rotation: 360 });
    
  return tl;
 }
});