(Sample)
GSAP (GreenSock Animation Platform)
GSAPは、高性能で柔軟なJavaScriptアニメーションライブラリです。要素の位置、サイズ、不透明度、回転など、さまざまなプロパティを簡単にアニメーションさせることができます。滑らかな動きと正確な制御が可能で、複雑なアニメーションも簡単に作成できます。
ScrollTrigger
ScrollTriggerは、スクロールに基づいたアニメーションを簡単に作成するためのGSAPプラグインです。スクロール位置に応じて要素のアニメーションをトリガーし、開始や終了のタイミングを精密に設定できます。ピン留め、スクラブ、パララックス効果など、多彩な機能を提供します。
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.2/ScrollTrigger.min.js"></script>GASPとScrollTriggerのJavaScriptファイルをCDNからインクルードします。
<div class="section">
<h2>フェードイン</h2>
<img class="fade-in" src="https://picsum.photos/600/400?random=1" alt="サンプル画像1">
</div>
(中略)imgにはそれぞれの効果にふさわしいクラス名をつけています。画像はlorem picsumからランダムに取得しています。
CSS
.zoom-in {
transform: scale(0.8); /* ズームインの初期状態 */
}
（中略）それぞれの効果の初期状態を設定します。
JavaScript
gsap.registerPlugin(ScrollTrigger);GSAPとScrollTriggerの初期化です。
// フェードイン
gsap.to(".fade-in", { // フェードインアニメーションを適用するターゲット要素
scrollTrigger: {
trigger: ".fade-in", // トリガー要素を指定
start: "top 80%", // アニメーションを開始する位置
end: "top 30%", // アニメーションを終了する位置
scrub: true, // スクロールに応じてアニメーションを進行
},
opacity: 1, // アニメーション終了時の不透明度
duration: 1 // アニメーションの持続時間
}); // ズームイン
gsap.to(".zoom-in", { // ズームインアニメーションを適用するターゲット要素
scrollTrigger: {
trigger: ".zoom-in", // トリガー要素を指定
start: "top 80%", // アニメーションを開始する位置
end: "top 30%", // アニメーションを終了する位置
scrub: true, // スクロールに応じてアニメーションを進行
},
opacity: 1, // アニメーション終了時の不透明度
scale: 1, // アニメーション終了時の拡大率
duration: 1 // アニメーションの持続時間
}); // スライドアップ
gsap.to(".slide-up", { // スライドアップアニメーションを適用するターゲット要素
scrollTrigger: {
trigger: ".slide-up", // トリガー要素を指定
start: "top 80%", // アニメーションを開始する位置
end: "top 30%", // アニメーションを終了する位置
scrub: true, // スクロールに応じてアニメーションを進行
},
opacity: 1, // アニメーション終了時の不透明度
y: 0, // アニメーション終了時の垂直方向の位置
duration: 1 // アニメーションの持続時間
}); // 回転
gsap.to(".rotate", { // 回転アニメーションを適用するターゲット要素
scrollTrigger: {
trigger: ".rotate", // トリガー要素を指定
start: "top 80%", // アニメーションを開始する位置
end: "top 30%", // アニメーションを終了する位置
scrub: true, // スクロールに応じてアニメーションを進行
},
opacity: 1, // アニメーション終了時の不透明度
rotate: 0, // アニメーション終了時の回転角度
duration: 1 // アニメーションの持続時間
}); // スライドダウン
gsap.to(".slide-down", { // スライドダウンアニメーションを適用するターゲット要素
scrollTrigger: {
trigger: ".slide-down", // トリガー要素を指定
start: "top 80%", // アニメーションを開始する位置
end: "top 30%", // アニメーションを終了する位置
scrub: true, // スクロールに応じてアニメーションを進行
},
opacity: 1, // アニメーション終了時の不透明度
y: 0, // アニメーション終了時の垂直方向の位置
duration: 1 // アニメーションの持続時間
});
// フリップイン
gsap.to(".flip-in", { // フリップインアニメーションを適用するターゲット要素
scrollTrigger: {
trigger: ".flip-in", // トリガー要素を指定
start: "top 80%", // アニメーションを開始する位置
end: "top 30%", // アニメーションを終了する位置
scrub: true, // スクロールに応じてアニメーションを進行
},
opacity: 1, // アニメーション終了時の不透明度
rotateY: 0, // アニメーション終了時のY軸の回転角度
duration: 1 // アニメーションの持続時間
});
// バウンスイン
gsap.to(".bounce-in", { // バウンスインアニメーションを適用するターゲット要素
scrollTrigger: {
trigger: ".bounce-in", // トリガー要素を指定
start: "top 80%", // アニメーションを開始する位置
end: "top 30%", // アニメーションを終了する位置
scrub: true, // スクロールに応じてアニメーションを進行
},
opacity: 1, // アニメーション終了時の不透明度
scale: 1, // アニメーション終了時の拡大率
ease: "bounce.out", // バウンス効果を指定
duration: 1 // アニメーションの持続時間
}); // ワープイン
gsap.to(".warp-in", { // ワープインアニメーションを適用するターゲット要素
scrollTrigger: {
trigger: ".warp-in", // トリガー要素を指定
start: "top 80%", // アニメーションを開始する位置
end: "top 30%", // アニメーションを終了する位置
scrub: true, // スクロールに応じてアニメーションを進行
},
opacity: 1, // アニメーション終了時の不透明度
skewX: 0, // アニメーション終了時のX軸の傾き角度
duration: 1 // アニメーションの持続時間
}); // フラッシュ
gsap.to(".flash", { // フラッシュアニメーションを適用するターゲット要素
scrollTrigger: {
trigger: ".flash", // トリガー要素を指定
start: "top 80%", // アニメーションを開始する位置
end: "top 30%", // アニメーションを終了する位置
scrub: true, // スクロールに応じてアニメーションを進行
},
opacity: 1, // アニメーション終了時の不透明度
repeat: 3, // アニメーションを3回繰り返す
yoyo: true, // アニメーションの方向を反転させる
onComplete: () => { // アニメーション完了時のコールバック
gsap.set(".flash", { opacity: 1 }); // 最終的に表示された状態に設定
},
duration: 0.1 // アニメーションの持続時間
}); // ストレッチイン
gsap.to(".stretch-in", { // ストレッチインアニメーションを適用するターゲット要素
scrollTrigger: {
trigger: ".stretch-in", // トリガー要素を指定
start: "top 80%", // アニメーションを開始する位置
end: "top 30%", // アニメーションを終了する位置
scrub: true, // スクロールに応じてアニメーションを進行
},
opacity: 1, // アニメーション終了時の不透明度
scaleX: 1, // アニメーション終了時の水平方向の拡大率
duration: 1 // アニメーションの持続時間
});
以上がGSAPとScrollTriggerを使った画像効果の解説です。