GSAP ScrollTrigger - Pin Elements with Progress Animation
P
Prompt
Create a GSAP ScrollTrigger animation that pins an element while it animates based on scroll progress. The element should be pinned for a specific scroll distance while its internal elements animate sequentially.
CODE PREVIEW
Customize Code with AI
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 use GSAP ScrollTrigger to create a pinned element with sequential animations based on scroll progress. The pinned section remains fixed while the user scrolls through a specific distance, and three step elements animate in sequence.
Key Features:
- Element Pinning: The middle section is pinned for 300% of the viewport height
- Sequential Animations: Three step elements animate one after another as you scroll
- Progress Tracking: A progress bar at the top shows scroll progress through the pinned section
- Smooth Transitions: All animations use smooth easing and proper timing
How It Works:
- ScrollTrigger pins the .pinned-section element for a specific scroll distance
- Each .step element has its own ScrollTrigger animation that activates at different scroll positions
- The progress bar updates in real-time based on scroll progress
- When the pinned section ends, normal scrolling resumes with a final animation
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / クレジットカード対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選