【GSAP】スクロールに応じて下からふわっとフェードインするパララックスアニメーションを作ろう！

下のサンプルのように、スクロールすると下から要素がふわっと現れるアニメーション、よく見かけますよね。

See the Pen Untitled by toshihide (@toshihide2000) on CodePen.

高級感やモダン感を効果的に演出できるため、Webサイト制作の際にはぜひ取り入れたい動きです。

この記事では、GSAPのScrollTriggerを使ってこのパララックスアニメーションを実現する方法について解説します。

記事内に広告を含みます

コード概要
1. HTML
2. CSS
3. JS
まとめ

コード概要

まずは全体のコードをお見せします。

HTML（Pug）

.box.parallaxTarget
.box.parallaxTarget
.box.parallaxTarget

CSS

.parallaxTarget{
  opacity: 0;
  filter: blur(4px);
  transform: translateY(50px);
}

//yarnなどでinstallしている場合
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger';

class gsapParallax {
  constructor(){
  //
    gsap.registerPlugin(ScrollTrigger);
    gsap.utils.toArray(".parallaxTarget").forEach(parallaxTarget => {
      gsap.to(parallaxTarget, {
        scrollTrigger: {
            trigger: parallaxTarget,
            start: "top 80%",
            toggleActions: "play none none reverse"
        },
        opacity: 1,
        filter: "blur(0px)",
        duration: 1.5,
        y:0,
        ease: "power3.out"
      });
    });
  //
  }
}

export { gsapParallax }

new gsapParallax();

パララックスを付与したい要素にクラスをつけて、そのクラスを持つ要素に対してGSAPで操作を加えています。

コードの詳細解説に移る前に、今回作る「スクロールすると下から要素がふわっと現れるアニメーション」の要件についてもう少し深掘りしてみていきましょう。

アニメーション要件

「スクロールすると」→要素がビューポート内に入ったらアニメーションが発火する→scrollTrigger
「下から現れる」→下から上に動くアニメーション→translateY
「ふわっと現れる」→ボンヤリからハッキリ→透明度操作→opacity
「ふわっと現れる」→ボンヤリからハッキリ→ブラー操作→blur（なくてもいい）

つまり、スクロールすると下から要素がふわっと現れるパララックスアニメーションを実現するには、scrollTriggerでビューポートと要素の交差判定をしつつ、translateとopacity、blurを操作できればいいという訳ですね。これを踏まえて、コードの詳細をみていきましょう。

HTML

HTML（Pug）

.box.parallaxTarget
.box.parallaxTarget
.box.parallaxTarget

パララックスを付与したい要素全てに.parallaxTargetを付与するだけです。

動いている感を出すために、セクションの枠組み自体は動かさず、テキストや画像などセクションの中身の要素を動かすと効果的です。

CSS

.parallaxTarget{
  opacity: 0;
  filter: blur(4px);
  transform: translateY(50px);
}

パララックスさせたい要素にアニメーションの初期スタイルを当てておきます。gsap.set()でも同じことができますが、PCとSPでアニメーションの度合いを変化させたい場合でもメディアクエリを追加するだけでいいことを考えると、アニメーションのスタイルはCSS側に持たせておいた方が便利でしょう。

Tips💡
opacityだけでなくblurを設定しておくことで、より「ボンヤリからハッキリ」感を演出できます

JS

//yarnなどでinstallしている場合
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger';

class gsapParallax {
  constructor(){
  //
    gsap.registerPlugin(ScrollTrigger);
    gsap.utils.toArray(".parallaxTarget").forEach(parallaxTarget => {
      gsap.to(parallaxTarget, {
        scrollTrigger: {
            trigger: parallaxTarget,
            start: "top 80%",
            toggleActions: "play none none reverse"
        },
        opacity: 1,
        filter: "blur(0px)",
        duration: 1.5,
        y:0,
        ease: "power3.out"
      });
    });
  //
  }
}

export { gsapParallax }

new gsapParallax();

yarnなどでGSAPとScrollTriggerをインストールしていることが前提となります。インストール方法についてはこちらをご覧ください。

2024年10月28日 GSAPのベーシックチートシート！基礎とよくある質問を徹底解説！

ScrollTriggerで交差判定をして、スタイルの付与/除去を行うというのがこのコードの基本的な仕組みとなっています。

gsap.registerPlugin(ScrollTrigger);→ScrollTriggerをアクティベートさせます。
gsap.utils.toArray(".parallaxTarget").forEach()→.parallaxTargetを持つすべての要素にアニメーションを適用させます。
start: "top 80%",→要素がビューポートに入って少ししたところでアニメーションを発火させます。ビューポートに入った瞬間アニメーションを発火させると動きが一部見えなくなるため、少し遅らせます。
toggleActions: "play none none reverse"→行ったり来たりしてもアニメーションが毎回発火するようにします。
opacity: 1, filter: "blur(0px)", duration: 1.5, y:0,→.parallaxTargetに指定したスタイルを打ち消すように指定します。durationはお好みで調整してください。
ease: "power3.out"→ease-outのイージングを設定しています。

durationやイージングを除く、アニメーションの動き自体はCSS側で設定し、GSAP側では’元の状態に戻す’指定だけにすることで、動きを調整する際にCSSを変えるだけで良くなり、メンテナンス性が向上します。

パララックスを一度だけ適用したい場合
scrollTriggerにonce:trueとtoggleactions:”play none none none”を指定することで、パララックスの適用を一度だけに限定することができます。

//yarnなどでinstallしている場合
import { gsap } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger';

class gsapParallax {
  constructor(){
  //
    gsap.registerPlugin(ScrollTrigger);
    gsap.utils.toArray(".parallaxTarget").forEach(parallaxTarget => {
      gsap.to(parallaxTarget, {
        scrollTrigger: {
            trigger: parallaxTarget,
            start: "top 80%",
            //パララックスを一度だけ適用したい場合👇
            once:true,
            toggleActions: "play none none none"
        },
        opacity: 1,
        filter: "blur(0px)",
        duration: 1.5,
        y:0,
        ease: "power3.out"
      });
    });
  //
  }
}

export { gsapParallax }

new gsapParallax();