Scroll Velocity Skew
Kinetic type that smears with scroll speed — shear, stretch, motion blur and chromatic fringing in one velocity-driven response — then whips back line by line with an elastic overshoot.
About This Effect
A velocity-reactive smear effect that makes a page feel physically connected to the scroll wheel. Flick hard and headlines deform in proportion to speed: they shear, stretch vertically, blur like a long-exposure frame and split into cyan and warm-red chromatic fringes, all driven by one velocity reading so every channel peaks and releases in phase. Let go and the stack whips back with an elastic overshoot, each line springing to rest a beat after the one above it, like a spring chain.
Everything tunes through data attributes on the group: mode (skew, stretch or both), max angle, strength, settle time, blur amount, fringe on/off, alternating per-line shear for a wave feel, and counter-directional scatter for grids. The filter channels are automatically gated to fine pointers, so phones keep the full transform response at 60fps while desktops get the complete smear. Off-screen groups cost nothing because each group's tracking only runs while it is in the viewport.
What's Included
- Velocity-driven shear with a hard configurable cap, layered with vertical stretch in 'both' mode
- Velocity-proportional motion blur (up to 6px) and chromatic fringing — cyan one side, warm red the other — that split wider with speed
- Elastic staggered settle: each line springs back with back.out overshoot 70ms after the one above, so stacks whip like a spring chain
- Alternating per-line shear direction so a flick travels through a stack as a wave, not a block tilt
- Counter-directional scatter for grids: odd tiles pull one way, even tiles the other, proportional to velocity
- Peak-hold velocity tracking: a new reading is only accepted when it beats the settling value, so the smear never snaps smaller mid-release
- Filter channels gated to fine pointers automatically — phones keep the full transform response without filter repaints
- Per-group tuning through eight data attributes, no JavaScript edits needed
- Works with native scroll or Lenis smooth scroll, no configuration difference
- Reduced-motion users see fully static, untransformed content
Perfect For
- Portfolio and agency sites where oversized headlines smear under a hard flick
- Landing pages that want the 'the page has mass' feel of award-site scrolling
- Image and video grids that stretch and scatter against each other under fast scrolling
- Editorial layouts with kinetic pull-quotes that lean as readers skim
- Case-study pages pairing calm layouts with one velocity-reactive signature moment
How It Works
Each group gets one ScrollTrigger spanning its time on screen, and its onUpdate reads self.getVelocity(), scales it by the group's strength, and clamps it to the configured maximum angle. Each line holds its own peak: a new reading is only accepted when it exceeds the value that line is still settling from, at which point an overwriting gsap.to() springs it back to zero with back.out — overshooting rest for the elastic snap — delayed 70ms per line so the release cascades down the stack.
Every spring's onUpdate renders one velocity value through per-line gsap.quickSetter calls as skewY (sign-flipped on odd lines when alternating), scaleY, and counter-directional y scatter, while blur() and a cyan/red text-shadow fringe are derived from the same value on fine pointers only, keeping phones on compositor-cheap transforms. gsap.matchMedia routes reduced-motion users to a branch that clears all transforms and filters and never creates the triggers.