WebCanta

初心者のための徹底ガイド-Web制作

会員ログイン
GSAP

GsapのscrollTriggerをマスターして アニメーションの幅を広げよう

GsapのscrollTriggerについて解説します
はじめに
概要
Gsapは非常に便利なアニメーションライブラリですが、デフォルトではスクロールに応じたアニメーションができません。そのため、scrollTriggerというプラグインを導入してアニメーションを実現します。※こちらはGsapで出来ることをまとめたサイトです。参考にしてください。Gsaｐの基本的な使い方はこちらになります。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
疑問を持つ読者のイラスト読者

GsapのscrollTriggerをマスターして アニメーションの幅を広げようは、最初にどこを理解するとよいですか？

著者・木村のプロフィール写真木村

対象要素を取得する処理、動作を始める条件、見た目を変える処理の三つに分けると、コードの流れを追いやすくなります。

話を聞く読者のイラスト読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

著者・木村のプロフィール写真木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

scrollTriggerの設定

scrollTriggerの設定では、GsapのscrollTriggerをマスターして アニメーションの幅を広げようを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

Gsapの読み込み

<head> 
// ここに基本的なタグを挿入 

// Gsapの読み込み　※投稿の時点ではバージョン3.11.5
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
// scrollTruggerの読み込み
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
// 任意のjsファイルを読み込む
<script defer src="js/script.js"> 
</head>
headタグでscriptタグを読み込む際には、defer属性を記述することをお忘れなく。コンソールにエラーが記述されていないか確認しましょう。 Gsapの各URLはこちらです。

コードを記述

こちらからファイルをダウロードすることも可能です。 HTML 
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css"
    />
    <link rel="stylesheet" href="dist/css/index.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
    <script defer src="js/script.js"></script>
  </head>
  <body>
    <header>ヘッダー</header>
    <div class="hero">メインビジュアル</div>
    <!-- /.hero -->
    <main>
      <div class="wrapper flex-column">
        <section>
          <div class="box1">box1</div>
          <!-- /.box1 -->
        </section>
        <section>
          <div class="box2">box2</div>
          <!-- /.box2 -->
        </section>
        <section>
          <div class="box3">box3</div>
          <!-- /.box3 -->
        </section>
      </div>
      <!-- /.wrapper -->
    </main>
  </body>
</html>
CSS(Scss) 
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  color: $cWhite;
  font-size: 2rem;
  letter-spacing: 0.02em;
}

img {
  max-width: 100%;
  vertical-align: bottom;
}

main {
  padding: 100px 0;
}

.wrap {
  margin: 0 auto;
  width: 90%;
}

header {
  display: flex;
  height: 150px;
  justify-content: center;
  align-items: center;
  background-color: $primary_blue-200;
}

.hero {
  display: flex;
  height: 500px;
  justify-content: center;
  align-items: center;
  background-color: $cBlack;
}

.box1,
.box2,
.box3 {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
  background-color: $cGay;
}

section {
  width: 100%;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 0 auto;
  align-items: center;
  gap: 50px;
}
javescript 
// ここにアニメーションさせたい要素を記述
gsap.from(".box1", 1, {
  opacity: 0,
  y: 20,

  // scrollTriggerの記述
  scrollTrigger: {
    // スクロールを開始する要素を記述
    trigger: ".hero",
    // アニメーションの開始を微調整
    start: "bottom center",
    // 視覚的に調整できるオプション
    markers: true,
  },
});

gsap.from(".box2", 1, {
  opacity: 0,
  y: 20,
  scrollTrigger: {
    trigger: ".box1",
    start: "bottom center",
    markers: true,
  },
});

gsap.from(".box3", 1, {
  opacity: 0,
  y: 20,
  scrollTrigger: {
    trigger: ".box2",
    start: "bottom center",
    markers: true,
  },
});

サイトを表示

※緑色のscroller-startとstartの位置に注目して動画を閲覧ください。赤色のendのマーカーは現時点意識する必要はありません。

ポイント解説

ポイント解説では、GsapのscrollTriggerをマスターして アニメーションの幅を広げようを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

trigger:box1の要素に対して、アニメーションを開始する要素を一つ上の.hero（メインビジュアル）に設定しています。 start:重要なのは次の指定です：“bottom center”という2つの設定です。”bottom”は緑のマーカーstartを指定し要素の位置を指定します。”center”ブラウザの開始位置を示し中央に配置しています。この部分は少し複雑ですが、値を変えて試してみてください。値を％で指定することも可能です。

ポイント解説で押さえたいポイント

ポイント解説は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。

ポイント解説の確認方法

ブラウザーのコンソールにエラーがないかを確認し、クリックやスクロールを繰り返してもイベントが重複しないかを試します。スマートフォン幅とキーボード操作も確認してください。

まとめ

  • scrollTriggerを理解すれば、アニメーションの幅が広がる
  • 視覚的にアニメーションの設定ができる
  • 簡単な記述で、複雑なアニメーションが実現できる
  • 今まで覚えた技術を活かすことができる

関連する記事

GSAP

【Gsap】SVGテキストアニメーション

このコードは、GSAPのScrollTriggerを使用して、スクロールイベントに基づいてSVGテキストの色を動的に変更するアニメーションを設定しています。ユーザーがページをスクロールすると、SVGテキストと黄色のボックスの位置とサイズを取得し、SVGテキストの下端が黄色のボックスの上端に重なるかどうかを確認します。テキストがボックスに重なる場合にはテキストの色を黒に、重ならない場合には白に変更することで、背景に対してテキストが読みやすい色で表示されるようにしています。この動的な色の変更により、スクロールに応じた視覚効果を提供し、ユーザー体験を向上させています。

GSAP

【Gsap】でSVGをアニメーション

Gsapを使って、SVG画像をアニメーションする方法について、このサイトで詳しく説明しています。実装例や具体的なコードを参考にして、Gsapを活用して魅力的なウェブサイトを作成しましょう。Gsapはサイト制作において非常に便利なツールです。

GSAP

【Gsap】スクロールアニメーション

この一連のコードは、ウェブページの構造、スタイル、および動的なインタラクションを定義するために使用されます。HTMLでページの基本的な骨格を作成し、CSS（Sassを含む）で視覚的スタイルを適用し、GSAPとScrollTriggerを使用してスクロールに基づいたアニメーションを実装しています。

MEMBER COMMENTS

コメント（0件）

会員ログイン後にコメントできます

記事への質問や感想をコメントで共有できます。無料会員登録後もこの記事へ戻れます。

会員ログイン 無料会員登録