Animation Library

Scroll Velocity

Kinetic typography strip driven by wheel momentum — velocity meter, motion blur, and focus falloff as you scroll.

ScrollGSAPMomentum
Asset previewStage · 16 : 10
Web · React + GSAPLive
Velocity
Scroll down
Watch it move
Stay in sync
Scroll down
Watch it move
Stay in sync
Scroll down
Watch it move
Stay in sync
Scroll down
Watch it move
Stay in sync
scroll · velocitymotion blur
01 · About

A looping vertical text strip responds to wheel input with accumulated velocity, friction, and vertical motion blur.

A looping vertical text strip responds to wheel input with accumulated velocity, friction, and vertical motion blur. Rows fade based on distance from the viewport center.

Built for featured landing cards and scroll-driven hero moments where typography should feel physically weighted.

02 · Metadata
Status
Production ready
Category
Scroll
Engine
GSAP
Platforms
Web
Last updated
May 2026· v1.0.0
03 · Technical notes
Implementation

Uses requestAnimationFrame with friction decay and SVG feGaussianBlur for velocity-based stretch.

Respects prefers-reduced-motion by disabling the physics loop.

04 · Use cases

  • Landing featured sections

    Preview scroll physics inside pinned horizontal galleries.

  • Editorial scroll moments

    Pair with scrubbed ScrollTrigger sections on long pages.