SWELLがスクロールに合わせて動く！ScrollTriggerで実現するアニメーションと実装手順

そんなときに役立つのがScrollTriggerです。GSAPのプラグインとして提供されるこの機能を使えば、ページのスクロール位置に応じてアニメーションを自在に制御でき、SWELLテーマのサイトをより魅力的に演出できます。

本記事では、ScrollTriggerの基本から実装手順、活用事例までを初心者にもわかりやすく解説します。

ScrollTriggerとは？

ScrollTriggerは、GreenSock社が提供するスクロール連動型のアニメーションプラグインです。指定した要素がビューポート内に入ったタイミングでアニメーションを再生でき、スクロール操作に応じて停止・再開・反転・完了などの制御が可能です。DOMやCSS、SVG、Canvas、WebGLといった多様な要素に適用できる柔軟性が特徴で、縦横のスクロールどちらにも対応しています。公式サイトやCodePenでは、数多くのサンプルを見ることができます。

GSAPとScrollTriggerの基本

GSAP（GreenSock Animation Platform）は、高度でリッチなアニメーションをシンプルに実装できるJavaScriptライブラリです。2020年5月に追加されたScrollTriggerは、スクロール位置を利用して動きを生み出すための強力なプラグインです。

これを利用することで、わずかなコードで動きのあるページを構築でき、静的なデザインをインタラクティブで魅力的な体験へと進化させることができます。詳細な解説や公式ドキュメントは以下で確認可能です。

• 公式サイト：https://gsap.com
• ScrollTriggerのページ：https://gsap.com/docs/v3/Plugins/ScrollTrigger
• CodePen：https://codepen.io/collection/DkvGzg

ScrollTriggerの主な機能

ScrollTriggerを導入することで、以下のような制御が可能になります。

• スクロール位置に応じたアニメーション発火
• スクロール進行度に同期するアニメーション
• 要素を特定位置に固定（ピン留め）
• 柔軟なトリガー位置の指定
• デバッグ用のビジュアルマーカー表示

これらを活用することで、パララックス効果や多層的なアニメーション、より動きのあるUIを容易に実現できます。

初心者に優しい理由

GSAPとScrollTriggerは、アニメーション初心者にも扱いやすいように設計されています。

• 直感的な記述：基本的なHTMLとJavaScriptの知識があれば導入可能。
• デバッグのしやすさ：マーカー機能で発火位置を視覚的に確認できる。
• 高いパフォーマンス：複雑なアニメーションも滑らかに動作する。

ScrollTriggerの特徴まとめ

• 短いコードでスクロール連動アニメーションを実装できる
• スクロール量に応じて進捗を制御できる
• 発火位置を自由に設定可能
• マーカーでトリガーポイントを確認できる
• ウィンドウサイズ変更にも柔軟に対応
• 導入が簡単

SWELLでのScrollTrigger実装手順

SWELLでScrollTrigger導入のメリット

WordPressテーマ「SWELL」は、デザイン性や操作性の高さから多くのユーザーに支持されています。しかし、標準機能だけでは動きのある表現に限界があります。ここでScrollTriggerを組み合わせることで、静的なページをインタラクティブに進化させることが可能です。例えば、スクロールに応じて画像やテキストをふわっと表示させることで、洗練された印象を与えることができます。

今回の例では下から上にフワッと要素が出現するアニメーションになっています。

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js"></script>

<?php // hookを使用した例 
function add_cdn_ScrollTrigger(){ ?>

<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>

<?php }
add_action( 'wp_head', 'add_cdn_ScrollTrigger',1);
?>

<p class="js-animation-bottom-to-top" ">アニメーション</p>

<?php
function scroll_trigger_script() 
{
?>

<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', function () {
		const animationSettings = {
			startY: '50px',
			endY: 0,
			startAlpha: 0,
			endAlpha: 1,
			duration: 1.2,
			easeType: 'power2.out',
			triggerStart: 'top bottom',
			showMarkers: false
		};

		// 対象要素を配列で取得
		const items = gsap.utils.toArray('.js-animation-bottom-to-top');

		// 要素ごとに処理
		items.forEach((item) => {
			let delayTime = 0;

			// アニメーション適用
			try {
				gsap.fromTo(
					item,
					{
						y: animationSettings.startY,
						autoAlpha: animationSettings.startAlpha
					},
					{
						y: animationSettings.endY,
						autoAlpha: animationSettings.endAlpha,
						duration: animationSettings.duration,
						ease: animationSettings.easeType,
						delay: delayTime,
						scrollTrigger: {
							trigger: item,
							start: animationSettings.triggerStart,
							markers: animationSettings.showMarkers
						}
					}
				);
			} catch (error) {
				console.error(`アニメーションの適用に失敗しました: 要素=${item.className} エラー内容=`, error);
			}
		});
	});
</script>

<?php
}
add_action('wp_footer', 'scroll_trigger_script');

ここまでの操作でスクロールに応じてアニメーションが起こります。

ScrollTriggerでよく起こる不具合

アニメーションの発火が遅れる

アニメーションの発火が遅れる（発火位置が異なる）事があります。

理由は下記のコードが足りない事です。下記コードを記述する事で、ページ内の読み込みが完了してから、アニメーションを発火する事ができます。

<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', function () {
	});
</script>