Velocity Skew
ベロシティスキュー
どんな動き？
スクロールの速さに連動してコンテンツをskewYで斜めに歪ませ、スクロールが減速して止まると歪みも元に戻るアニメーション。勢いよくスクロールしているときほど画面がグッと傾くため、速度そのものが視覚的なフィードバックになる。GSAP ScrollTriggerでスクロール速度を取得して実装するのが一般的で、ギャラリーセクションなどにスピード感を出したいときに使われる。
よく使う場所
ギャラリーセクションテキストブロックヒーローセクション
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Skew content in proportion to scroll velocity, then relax it back to normal as the scroll slows and stops.Trigger:
Scroll velocity measured continuously while scrolling.
Start:
Scroll begins accelerating — skewY starts increasing from 0deg toward a maximum tied to speed.
End:
Scroll input stops and velocity returns to 0 — skewY eases back to 0deg.
Behavior:
skewY is driven by current scroll speed rather than scroll position: fast scrolling produces a pronounced diagonal distortion, and the distortion continuously relaxes toward 0 as the scroll decelerates, snapping flat the instant it stops.
Initial state:
transform: skewY(0deg)
Final state:
transform: skewY(0deg) (returns to flat once scrolling stops; peaks at skewY(-8deg) or so at top speed)実装方法の候補
この動きは以下の技術で実装できます。
GSAP ScrollTriggerLenis
別名・関連ワード
Scroll SkewSpeed-based SkewSkew on Scroll