【GSAP】スクロールでふわっとフェードインさせる方法【アニメーションのサンプルあり】

GSAPを使ってスクロールして要素をふわっとフェードインで表示させるにはどうしたらいいの？

最初は表示されていなくて、スクロールして画面内に入ったらふわっと表示する実装は実務でも非常に多いです。

色んな方法がありますが、今回はJavaScriptのライブラリ『GSAP』を使った方法を解説していきます。

GSAPを使ったことがないという人は、まず以下の記事を参照下さい。

GSAPを使ってスクロールでふわっとフェードインさせる方法

今回はただふわっとフェードインさせるのではなく、スクロールしてからアニメーションを開始させるので、ScrollTriggerというプラグインを使います。

ScrollTriggerの使い方は以下の記事を参照下さい。

コードの解説

それでは早速ですが、最小限のコードはこちらです。

<div class="container">
  <div class="box"></div>
</div>

gsap.fromTo(
  ".box", // アニメーションさせる要素
  {
    autoAlpha: 0, // アニメーション開始前は透明
  },
  {
    autoAlpha: 1, // アニメーション後は出現(透過率0)
    scrollTrigger: {
      trigger: ".box", // アニメーションが始まるトリガーとなる要素
      start: "top center", // アニメーションの開始位置
    },
  }
);

CSSはただの調整用なので割愛します。

JavaScriptはこのような意味になります。

gsap.fromTo("アニメーションさせる要素",{アニメーション前の状態},{アニメーション後の状態},});

JavaScriptはコメントしてありますが、1つずつ解説します。

fromTo：アニメーションの開始から終了まで指定するメソッド
".box"：アニメーションさせたい要素
autoAlpha: 0：アニメーション開始前の状態。これは透明という意味。
autoAlpha: 1：アニメーション後の状態。これは透明じゃなくなるという意味（透過率0）
scrollTrigger：スクロールイベント
trigger: ".box"：アニメーションが始まるトリガーとなる要素（2行目とは意味が違うが、今回はアニメーションさせたい要素とトリガーは同じ要素）
start: "top center"：アニメーションの開始位置を指定。"top center"は"要素の上 画面の中央"という意味。

サンプルはこちらです（ゆっくりスクロールしながら左を見てて下さい）

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

最初から見たい場合は右下のRerunをクリックして下さい。

フェードインアニメーションのサンプル

それでは何種類かアニメーションのサンプルをご紹介します。

また先ほどのコードに分かりやすくするため以下のコードを追記します。

toggleActions: "play none none reverse"：スクロールした後に戻るとアニメーションも戻る。
markers: true：確認用のマーカーを表示。

アニメーションをもう一度見たい場合は、右下の『Rerun』をクリックするかスクロールを上に戻してみて下さい。

またアニメーションが発火するタイミングは、startが画面中央のscroller-startを過ぎた時です。

上下からフェードイン

これが一番よく使うと思いますが、先ほどはただ透明になっていた要素が表示されただけですが、今度は少し下から上に向かってフェードインさせてみます。

追記したコードは縦方向の位置を指定する"y"です。

gsap.fromTo(
  ".box", // アニメーションさせる要素
  {
    y: 100, // アニメーション開始前の縦位置(下に100px)
    autoAlpha: 0, // アニメーション開始前は透明
  },
  {
    y: 0, // アニメーション後の縦位置(上に100px)
    autoAlpha: 1, // アニメーション後に出現(透過率0)
    scrollTrigger: {
      trigger: ".box", // アニメーションが始まるトリガーとなる要素
      toggleActions: "play none none reverse", // 上スクロールで戻る
      start: "top center", // アニメーションの開始位置
      markers: true, // マーカー表示
    },
  }
);

サンプルはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

今回は分かりやすくするように100pxと少し大きめに移動していますが、実際は20pxくらいの控えめな数値がいいかも知れません。

またy: 100ではなくy: -100にすると上からフェードインします（あまり使わないと思いますが）

左右(横)からフェードイン

今度は横からですが、先ほどの縦が"y"で横は"x"になります。

gsap.fromTo(
  ".box", // アニメーションさせる要素
  {
    x: 100, // アニメーション開始前の横位置(右に100px)
    autoAlpha: 0, // アニメーション開始前は透明
  },
  {
    x: 0, // アニメーション後の横位置(左に100px)
    autoAlpha: 1, // アニメーション後に出現(透過率0)
    scrollTrigger: {
      trigger: ".box", // アニメーションが始まるトリガーとなる要素
      toggleActions: "play none none reverse", // 上スクロールで戻る
      start: "top center", // アニメーションの開始位置
      markers: true, // マーカー表示
    },
  }
);

サンプルはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

またx: 100ではなくx: -100にすると左からフェードインします。

斜めからフェードイン

これは単純に"y"と"x"を両方書くだけです。

gsap.fromTo(
  ".box", // アニメーションさせる要素
  {
    x: -100, // アニメーション開始前の横位置(左に100px)
    y: 100, // アニメーション開始前の縦位置(下に100px)
    autoAlpha: 0, // アニメーション開始前は透明
  },
  {
    x: 0, // アニメーション後の横位置(右に100px)
    y: 0, // アニメーション後の縦位置(上に100px)
    autoAlpha: 1, // アニメーション後に出現(透過率0)
    scrollTrigger: {
      trigger: ".box", // アニメーションが始まるトリガーとなる要素
      toggleActions: "play none none reverse", // 上スクロールで戻る
      start: "top center", // アニメーションの開始位置
      markers: true, // マーカー表示
    },
  }
);

サンプルはこちら（左下から右上に向かってフェードイン）

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.

拡大しながらフェードイン

次は拡大しながらフェードインさせてみます。

拡大させるにはscaleを使います。

gsap.fromTo(
  ".box", // アニメーションさせる要素
  {
    scale: 1,  // 縦横1倍
    autoAlpha: 0, // アニメーション開始前は透明
  },
  {
    scale: 1.5, // 縦横1.5倍
    autoAlpha: 1, // アニメーション後に出現(透過率0)
    scrollTrigger: {
      trigger: ".box", // アニメーションが始まるトリガーとなる要素
      toggleActions: "play none none reverse", // 上スクロールで戻る
      start: "top center", // アニメーションの開始位置
      markers: true, // マーカー表示
    },
  }
);

サンプルはこちら。

See the Pen
Untitled by junpei (@junpei-sugiyama)
on CodePen.