GSAPの保守性を上げるEffectsの紹介
杉田侑祐約4分で読めます
こんにちは、株式会社TOKOSのスギタです！
今回はGSAPのPropertiesの中のEffectsについて紹介します。
初めて聞いた方も多いと思います。
アニメーションのコード管理・保守性・再利用性を向上させてくれます！
はじめに
対象読者
- JavaScriptを用いたアニメーションに興味のある方
この記事で扱わない内容:
- JavaScriptの基本的な使用方法
- GSAPの使用方法やインストール方法
Effectsの概要
GSAPのEffects機能は、アニメーションのコード管理・保守性・再利用性を劇的に向上させる強力な機能です。大規模なWebプロジェクトや複数人での開発において、その真価を発揮します。
なぜEffectsが必要なのか？
従来のアニメーション実装では以下の問題が発生します！
// 悪い例：同じようなアニメーションがあちこちに散らばる
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を使用した例を紹介します。
// 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が呼び出し時のメソッド名になります！
// 例
gsap.effects.fadeOut()② アニメーションの処理を書く
ここがeffect関数の重要な部分になります！
effect: (targets, config) => {…}のように記述していきます！
引数の内容は以下のとおりです。
targets- アニメーションする要素（
.my-elementが渡される）
- アニメーションする要素（
config- 実行時の設定（
{ duration: 1 }などが渡される）
- 実行時の設定（
// 使用例
gsap.effects.fadeOut(".element", { duration: 2, delay: 0.5 })またeffect内では必ずGSAPアニメーションを返す必要があります！
// 正しい例
effect: (targets, config) => {
return gsap.to(targets, { ... }); // GSAPアニメーションを返す
}
// 間違った例
effect: (targets, config) => {
gsap.to(targets, { ... }); // returnが無い
// undefined が返される
}③ デフォルト値を設定
呼び出し時にConfigの値を省略した場合に使われるデフォルト値を設定します！
// 上書きしたい時
gsap.effects.fadeOut(".element", { duration: 2 })その他
呼び出し時は一部だけ上書きして呼び出すことも可能です！
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も使用可能です！
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
},
})さいごに
GSAPのEffectsは単なる機能ではなく、アニメーションコードの設計思想を変える重要な仕組みになります。
大規模なサイト制作や多くのアニメーションを実装する際はEffectsで管理することをおすすめします！
この記事を書いた人
