Quick Start
1. Add to your HTML <head>:
Code snippet omitted: it ships with the download.
2. Add before closing </body> tag:
Code snippet omitted: it ships with the download.
3. Add the effect HTML anywhere in your <body>:
Code snippet omitted: it ships with the download.
Every element with data-velocity-item inside the group deforms with scroll speed. If a group contains no data-velocity-item elements, the group element itself is transformed.
Options
All options go on the data-velocity-skew group element.
| Attribute | Values | Default | Description |
|---|---|---|---|
data-velocity-mode |
skew, stretch, both |
skew |
skew shears (best for type), stretch scales vertically (best for media), both layers a full skew with a subtle stretch — the signature smear |
data-velocity-max |
Any number (degrees) | 10 |
Hard cap on the shear angle. Above ~14 text reads as broken rather than fast |
data-velocity-strength |
Any number | 1 |
Velocity multiplier. 1 reaches the cap at a hard flick (~4000px/s); 2 reaches it at a lazy scroll |
data-velocity-settle |
Seconds | 0.7 |
How long each item takes to spring back. The settle uses back.out, so items overshoot rest slightly — the elastic snap. Below ~0.3 it reads as a glitch |
data-velocity-blur |
Max px (0–6) | 0 (off) |
Motion blur at the velocity cap, scaling with speed. Capped at 6px: beyond that glyphs dissolve into fog. Fine pointers only |
data-velocity-fringe |
true, false |
false |
Chromatic fringing: a cyan shadow splits one way and a warm red one the other, wider and more opaque with speed. Fine pointers only |
data-velocity-alternate |
true, false |
false |
Odd items shear the opposite way, so a flick travels through the stack as a wave instead of tilting it as one block. Skew channel only |
data-velocity-shift |
Max px | 0 (off) |
Counter-directional scatter: odd items translate one way, even items the other, proportional to velocity. Made for grids |
How the Settle Works
On every scroll frame the effect reads velocity and holds the peak: a new reading is only accepted when it exceeds the value an item is still settling from, so a slow frame never snaps the smear smaller. When you stop, each item springs back to rest with back.out — overshooting slightly past zero — and each item starts 70ms after the one before it, so a stack whips like a spring chain, top line first.
Performance Notes
- Blur and chromatic fringe only run on fine pointers (
pointer: fine). Transforms are compositor-cheap, per-frame filter repaints are not; phones keep the full skew, stretch, wave and scatter and skip the filters. This gating is built in — no configuration needed. - Give transformed elements
will-change: transform(add, filterif you enable blur); the demo stylesheet does this for.headline. - Each group's velocity tracking only runs while the group is inside the viewport, so groups further down the page cost nothing until they arrive.
- Rendering uses
gsap.quickSetterper item: one velocity value drives many cheap writes, so a group with dozens of items stays smooth at speed. - The chromatic fringe is a JS-driven
text-shadow, so it needs no duplicate markup and paints in the same pass as the text. - Skewed glyphs extend past their line box. If a full-width headline sits near the viewport edge, give it a little horizontal padding or you may see brief horizontal overflow at high velocity.
Accessibility
- Reduced motion: with
prefers-reduced-motion: reduce, no triggers are created, no transforms or filters are applied, and content renders fully static. - No hidden content: the effect never changes opacity or visibility; without JavaScript the page is simply still.
- Non-interactive: the effect adds no interactive elements, so there is nothing extra to reach by keyboard.
Works With Lenis
If Lenis is on the page the script picks it up automatically and forwards its scroll events to ScrollTrigger; velocity readings are identical either way. Delete the Lenis block at the top of script.js if you want to guarantee native scrolling only.
Dependencies
Required:
- GSAP 3.12+
- ScrollTrigger plugin
Optional:
- Lenis (smooth scroll integration)
Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.
