GSAP ScrollTrigger 画像表示アニメーション

このチュートリアルでは、GSAP ScrollTriggerを使用してスクロールトリガー画像表示アニメーションを作成する方法を紹介します。各画像が異なる方向（左、右、上、下）からスライドインし、スクロールに合わせてカラーオーバーレイがフェードアウトします。

アニメーションはScrollTriggerのscrub機能を使用して、スクロール位置に連動したスムーズな動きを実現しています。各画像ラッパーにはカスタマイズされた開始点と終了点を持つ独自のScrollTriggerインスタンスが設定されています。

紫色のグラデーションオーバーレイは、画像が表示されるにつれて消えていくドラマチックな表示効果を生み出します。キャプションもわずかな遅延でフェードインし、視覚的な面白さを追加しています。

このテクニックは、ポートフォリオサイト、画像ギャラリー、またはスクロールベースのインタラクションを追加したいコンテンツの多いサイトに最適です。