GSAP ScrollTrigger Text Reveal Animation Prompt Example
CODE PREVIEW
Prompt
Create a text reveal animation using GSAP ScrollTrigger where each character appears with a sliding effect as the user scrolls.
この実装は、GSAP ScrollTriggerを使用した高度なテキスト表示アニメーションをデモンストレーションしています。ターゲットのテキスト要素内の各文字は「char」クラスを持つspan要素でラップされ、初期状態では透明度0と垂直オフセットが設定されています。ユーザーがコンテンツセクションをスクロールすると、ScrollTriggerがアニメーションシーケンスをトリガーし、各文字が段階的な遅延でスライドしながら表示されます。
アニメーションはスムーズな動きのためにpower2.outイージングを使用し、ユーザーが下にスクロールするにつれてヒーロータイトルがフェードアウトする微妙なパララックス効果も含まれています。splitTextIntoChars関数は文字のラッピングを処理し、スペースが改行されないスペースで保持されるようにします。
この技術は、雑誌のような没入感のある読書体験を創出し、異なるテキストスタイルやスクロール動作に簡単にカスタマイズできます。
Prompt Overview
This prompt instructs an AI coding assistant to generate a GSAP ScrollTrigger animation in which individual characters slide into view as the user scrolls down the page. The result is a polished, scroll-driven text reveal effect — a technique widely used in modern web design for hero sections, landing pages, and portfolio sites where strong visual impact matters. Because the animation is tied to the scroll position rather than a timer, it feels responsive and intentional, rewarding users as they explore the page.
This prompt works best with AI models that have solid JavaScript and front-end knowledge, such as GPT-4o or Claude 3.5 Sonnet. To get the most out of it, you can extend the prompt by specifying font size, stagger timing, easing curves, or whether the effect should trigger once or repeat on scroll-back. It is an excellent starting point for developers who want production-ready GSAP boilerplate without spending time consulting documentation from scratch.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選