GSAPでよく使う処理や活用方法小ネタまとめ

ウェブページのアニメーションをかんたんに実装できるJavScriptのライブラリの「GSAP（ジーサップ）」が便利すぎて、どんどん取り入れています。GSAPの最初の記事「GSAPを使ってウェブページのアニメーションをかんたん実装！」のを書いて以降、個人的によく使う処理や活用方法を備忘録としてまとめてみました。

1. ページの読み込みが完了してからアニメーションを再生する

GSAPに限った話ではないですが、ページの読み込みが不完全なまま、途中でアニメーションを再生してしまうと大きさや位置ずれてしまう場合があります。画像やCSSなどのページの読み込みが完全に完了してからアニメーションを再生させるには、window.addEventListener(‘load’〜の中にGSAPの内容を記述します。

window.addEventListener('load', () => {
  gsap.to('.hoge', {
    delay: 1,
    opacity: 1,
  });
});

2. 指定した要素がページに存在する場合のみアニメーションを実行する

例えばcommon.jsなど全ページ共通で読み込んでいるJSに、共通の要素(.hoge)のアニメーションの記述があるとします。このとき、ある特定のページでは指定した要素(.hoge)が存在しない場合にはエラーを返してしまうので、ifを使って事前に確認をしてから実行するようにします。
なおページ内に複数の要素(.hoge)が存在する場合は、document.querySelectorAll(‘.hoge’).length を使って判定を行います。

if (document.querySelector('.hoge')) {
  gsap.to('.hoge', {
    delay: 1,
    opacity: 1,
  });
}

//ページ内に複数の.hogeがある場合
if (document.querySelectorAll('.hoge').length) {
  gsap.to('.hoge', {
    delay: 1,
    opacity: 1,
  });
}

3. 複数のアニメーションを1つに連結して実行する

ある要素を単発で動かすのではなく、1つあるいは複数の要素を連結させてタイムラインのアニメーションを行うにはtimeline()メソッドを利用します。最初にtimelineを定義して全体設定を行います。その後、.to()などを使ってアニメーションの流れを連結させていくだけです。

//このタイムライン全体の設定
const timeline = gsap.timeline({
  repeat: -1, //無限リピート
});

//ここからメソッドチェーンで連結させて記述する
timeline
.to('.hoge', { y: 10, duration: 1 }) //.hogeを1秒かけてy軸方向へ10px移動
.to('.hoge2', { x: 100, opacity:0, duration: 0.5 }) //.hoge2を0.5秒かけてx軸方向へ100px移動、透明度0%に
.to('.hoge', { y: -100, opacity:1, duration: 0.5 }) //.hogeを0.5秒かけてy軸方向へ-100px移動、透明度100%に

【参考】個別にアニメーションの再生間隔を微調整する

タイムラインアニメーションにおいて、前後の間隔を早めたり遅らせたりしたいときがあります。“-=1”や“+=1”のような感じでコンマに続いて記述するだけで、開始のタイミングを調整できます。

timeline
.to('.anime01', { y: 10, duration: 1 }, "+=1") //1秒早めて再生
.to('.anime01', { x: 100, opacity:0, duration: 0.5 }, "-=1") //1秒早めて再生

4. ScrollTrigerの設定値を一括管理する

スクロール連動させるときに使うscrollTriggerの設定値は使い回す機会が多々あります。そんなときは最初に設定値をまとめて記述しておいて、… （スプレッド構文）で使い回せば、管理が楽になります。

//scrollTriggerの設定値を「baseScrollTrigger」としてまとめる
const baseScrollTrigger = {
  start: "top 80%", //トリガーの開始位置
  toggleActions: "play none none none", //1回のみ実行
  markers: false, //マーカーは非表示
  scrub: true, //スクロール量に応じてアニメーションを変化させるか
};

//...baseScrollTriggerを入れるだけ
gsap.to(".section01", {
  opacity: 1,
  y: 0,
  duration: 1,
  scrollTrigger: {
    ...baseScrollTrigger, //←これ
    trigger: ".section01",
  },
});

gsap.from(".section02", {
  opacity: 0,
  y: 50,
  duration: 1,
  scrollTrigger: {
    ...baseScrollTrigger, //←これ
    trigger: ".section02",
  },
});

5. クリップパスをアニメーションさせる

GSAPはCSSのclip-pathを使って、クリップパスをアニメーションさせることができます。サンプルでは四角形でクリップマスクをするinset()を用いて、右の100%→0%にすることで、左から右へ徐々に表示させるアニメーションにしています。イージングを使ったり、スクロール連動したりと使い道はたくさんありますね。

.hoge {
  width: 1000px;
  height: 200px;
  background: blue;
  clip-path: inset(0 100% 0 0); //inset(上 右 下 左)
}

//1秒かけて左から右へ表示させる
gsap.to('.hoge', {
  clipPath: 'inset(0 0% 0 0)',
  duration:1,
});

といったところで、またGSAPでよく使う処理や活用方法の小ネタ出てきたら、まとめて記事にしたいと思います。