GSAP ScrollTrigger Text Reveal Animation
Prompt
Create a text reveal animation using GSAP ScrollTrigger where text elements slide in and fade as the user scrolls. The animation should be smooth and responsive.
CODE PREVIEW
AI rewrites this code based on your instructions. Preview is free; copy & download unlocked for ¥100.
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
This tutorial demonstrates how to create smooth text reveal animations using GSAP ScrollTrigger. As you scroll down the page, text elements will slide in from different directions with fade effects.
The implementation uses GSAP's ScrollTrigger plugin to trigger animations based on scroll position. Each text element has its own animation timeline that starts when it enters the viewport.
Key features include:
- Text sliding from left and right alternately
- Fade-in effects with opacity transitions
- Scale animations for headings
- Background color transitions for content blocks
- Responsive design that works on all devices
- Smooth animation easing with power2.out
The code is structured to be easily customizable - you can adjust animation properties, timing, and triggers to match your design needs.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / クレジットカード対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選