GSAP ScrollTrigger テキスト表示アニメーション

このチュートリアルでは、GSAP ScrollTriggerを使用してスムーズなテキスト表示アニメーションを作成する方法を紹介します。ページをスクロールダウンすると、テキスト要素が異なる方向からスライドインし、フェード効果が適用されます。

実装では、GSAPのScrollTriggerプラグインを使用して、スクロール位置に基づいてアニメーションをトリガーします。各テキスト要素には、ビューポートに入ったときに開始される独自のアニメーションタイムラインがあります。

主な機能：

• 左右交互にスライドするテキスト
• 透明度遷移によるフェードイン効果
• 見出しのスケールアニメーション
• コンテンツブロックの背景色遷移
• すべてのデバイスで動作するレスポンシブデザイン
• power2.outによるスムーズなアニメーションイージング

コードは簡単にカスタマイズできるように構成されており、アニメーションプロパティ、タイミング、トリガーをデザインのニーズに合わせて調整できます。