Scrub
スクラブ
どんな動き？
スクロール位置と1対1で連動し、進んだ分だけアニメーションが進行し、戻ればアニメーションも巻き戻る動き。scroll-triggerのように「発火したら最後まで自動再生」ではなく、指先の動きとアニメーションの進行度が常に一致するのが特徴。動画のスクラブバーのような直感的な体験を作れるため、ストーリーテリング系のロングページで多用される。
よく使う場所
ストーリーテリングページプロダクト紹介画像シーケンス演出
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Tie the animation progress directly to scroll distance so it scrubs forward and backward with the user.Trigger:
Scroll position within a defined range (e.g. while the element sits inside the viewport).
Start:
0% scroll progress through the range — animation progress is 0.
End:
100% scroll progress through the range — animation progress is complete; scrolling back up reverses it exactly.
Behavior:
Animation progress is mapped 1:1 to scroll distance, so the element rotates and moves only as far as the user has scrolled, pausing and reversing instantly with the scroll direction.
Initial state:
rotate: 0deg
translateY: 0
Final state:
rotate: 180deg
translateY: -60px実装方法の候補
この動きは以下の技術で実装できます。
GSAP ScrollTrigger (scrub: true)CSS Scroll-driven Animations (animation-timeline: scroll())
別名・関連ワード
Scroll ScrubScroll-linked AnimationScrubbed Timeline