GSAP Web制作 JavaScript

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

あわせて読みたい
GSAPとは?基本的な使い方とアニメーションのサンプル付きで解説
GSAPとは?基本的な使い方とアニメーションのサンプル付きで解説

続きを見る

重要なコード以外は省略している箇所が多いので、全部見たい人はCodePen左上のHTML・CSS・JSをクリックして下さい。

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

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

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

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

あわせて読みたい
【GSAP】ScrollTriggerの使い方とスクロールアニメーションのサンプルを紹介
【GSAP】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.

 

横に並んだ要素が順番に下からフェードイン

横に並んだ要素を順番にフェードインさせるのもよく使うと思います。

それにはStaggerというプロパティで時間差を作る必要があります。

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

あわせて読みたい
【GSAP】Staggerで時間差を作り順番にアニメーションさせる方法
【GSAP】Staggerで時間差を作り順番にアニメーションさせる方法

続きを見る

追記したコードは先ほど解説した下から移動させる"y"と、時間差でアニメーションさせる"stagger"になります。

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

サンプルはこちら。

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

 

色んな組み合わせのアニメーション

最後に色々組み合わせてみたいと思います。

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

他にも四隅の角の丸みを変えるborderRadius、色を変えるbackgroundColor傾斜を変えるskewXskewYなどもあります。

まとめ

今回はGSAPとScrollTriggerというGSAPのプラグイン、あとはStaggerというプロパティを使ったフェードインの実装を解説してきました。

実務でよく使うのは、以下の2つだと思います。

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-GSAP, Web制作, JavaScript