GSAPスクロールでテキスト1文字ずつ出現｜プロンプト作例

この実装は、GSAP ScrollTriggerを使用した高度なテキスト表示アニメーションをデモンストレーションしています。ターゲットのテキスト要素内の各文字は「char」クラスを持つspan要素でラップされ、初期状態では透明度0と垂直オフセットが設定されています。ユーザーがコンテンツセクションをスクロールすると、ScrollTriggerがアニメーションシーケンスをトリガーし、各文字が段階的な遅延でスライドしながら表示されます。

アニメーションはスムーズな動きのためにpower2.outイージングを使用し、ユーザーが下にスクロールするにつれてヒーロータイトルがフェードアウトする微妙なパララックス効果も含まれています。splitTextIntoChars関数は文字のラッピングを処理し、スペースが改行されないスペースで保持されるようにします。

この技術は、雑誌のような没入感のある読書体験を創出し、異なるテキストスタイルやスクロール動作に簡単にカスタマイズできます。