Scale on Scroll
スクロール連動スケール
どんな動き？
スクロール位置に応じて画像やカードのサイズが連続的に変化するアニメーション。ページ上部では大きく表示し、スクロールが進むにつれて縮小して次のコンテンツへ視線を移す、といった使い方が多い。scrubと同様スクロール量と完全に連動するため、動きの滑らかさが体験の質を左右する。
よく使う場所
ヒーロー画像プロダクト画像見出しビジュアル
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Scale the element down (or up) continuously as scroll progress advances through a section.Trigger:
Scroll position across a defined range.
Start:
0% scroll progress — element at full scale.
End:
100% scroll progress — element at minimum scale.
Behavior:
Scale is driven directly by scroll progress: the element continuously shrinks as the user scrolls through the range, with no extra easing delay beyond the scroll itself.
Initial state:
scale: 1
Final state:
scale: 0.7実装方法の候補
この動きは以下の技術で実装できます。
GSAP ScrollTrigger (scrub: true)CSS Scroll-driven Animations
別名・関連ワード
Scroll ScaleShrink on ScrollScroll-linked Scale