【Gsap】
SVGテキストアニメーション

はじめに
概要
このコードは、GSAPのScrollTriggerを使用して、スクロールイベントに基づいてSVGテキストの色を動的に変更するアニメーションを設定しています。ユーザーがページをスクロールすると、SVGテキストと黄色のボックスの位置とサイズを取得し、SVGテキストの下端が黄色のボックスの上端に重なるかどうかを確認します。テキストがボックスに重なる場合にはテキストの色を黒に、重ならない場合には白に変更することで、背景に対してテキストが読みやすい色で表示されるようにしています。この動的な色の変更により、スクロールに応じた視覚効果を提供し、ユーザー体験を向上させています。
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
実装内容
パターン1
スクロールとテキストを紐づけて表示し画面を固定
パターン2
startの位置でアニメーションを一回のみ実装
パターン3
パターン1の応用SVGテキストを徐々に白色に変化させる




