Scroll Skew Velocity — Free GSAP ScrollTrigger Skew Effect

Velocity skew is the tactile effect where list items shear slightly in the direction you're scrolling and snap upright when you stop — the "the page has momentum" feel from award-winning sites. This snippet builds it with GSAP and ScrollTrigger (from a CDN), reading raw scroll velocity and mapping it to a live skew.

Reading scroll velocity

A global ScrollTrigger with an onUpdate callback runs on every scroll frame and calls self.getVelocity(), which returns the current scroll speed in pixels per second — positive scrolling down, negative scrolling up. That number is the engine of the effect: fast scrolling yields a big value, easing off yields a small one, and stopping yields zero. No manual delta tracking or timing is needed; ScrollTrigger measures it.

Mapping velocity to skew

The raw velocity is divided down (/ -260) to a sensible degree range and passed through gsap.utils.clamp(-14, 14) so even a violent flick can't shear the cards past a tasteful maximum. The negative divisor flips the sign so the cards lean the way that reads as "trailing" the scroll. This clamp-and-scale step is what keeps the effect feeling like physics rather than a glitch.

quickTo for cheap per-frame updates

Instead of creating a new tween every frame (expensive and janky), each card gets a gsap.quickTo(el, 'skewY', ...) setter — a reusable function that smoothly interpolates that one property toward whatever value you pass. On each scroll update the code calls every setter with the current skew, and GSAP eases the actual skewY toward it with a short power3 duration. That built-in easing is what makes the skew ramp up and settle smoothly, and crucially returns the cards to 0 when velocity drops, with no separate "reset" logic.

Why this is the right pattern

Skewing on scroll naively (writing transform directly from velocity) looks twitchy because raw velocity is noisy. Routing it through quickTo's interpolation low-passes the motion, and the clamp bounds it — together they turn a jittery signal into a fluid lean. ScrollTrigger's getVelocity removes the need to compute speed by hand across frames.

Composited and contained

Only transform (skewY) animates, so the browser composites the cards on the GPU with no reflow, and will-change: transform promotes them. The effect scales to many items because every card shares the same single velocity read per frame.

Customizing it

Change the divisor for more or less shear, the clamp for a tighter or looser limit, the quickTo duration for snappier or floatier recovery, or skew on skewX for a horizontal feel. Pair it with a scroll velocity marquee, a scroll reveal grid, or an animated list.