GsapのscrollTriggerをマスターして
アニメーションの幅を広げよう
はじめに
概要
Gsapは非常に便利なアニメーションライブラリですが、デフォルトではスクロールに応じたアニメーションができません。そのため、scrollTriggerというプラグインを導入してアニメーションを実現します。※こちらはGsapで出来ることをまとめたサイトです。参考にしてください。Gsaｐの基本的な使い方はこちらになります。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
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のマーカーは現時点意識する必要はありません。
ポイント解説
trigger:box1の要素に対して、アニメーションを開始する要素を一つ上の.hero（メインビジュアル）に設定しています。
start:重要なのは次の指定です：“bottom center”という2つの設定です。”bottom”は緑のマーカーstartを指定し要素の位置を指定します。”center”ブラウザの開始位置を示し中央に配置しています。この部分は少し複雑ですが、値を変えて試してみてください。値を％で指定することも可能です。
まとめ
- scrollTriggerを理解すれば、アニメーションの幅が広がる
- 視覚的にアニメーションの設定ができる
- 簡単な記述で、複雑なアニメーションが実現できる
- 今まで覚えた技術を活かすことができる