# 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.

Canonical: https://gsapvault.com/effects/scroll-velocity-skew
Live demo: https://gsapvault.com/demos/scroll-velocity-skew/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | velocity-reactive, kinetic-typography, skew, stretch, motion-blur, chromatic-aberration, quickTo |
| Uses Lenis | Yes |

## Overview

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.

## Features

- 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

## Use Cases

- 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.

## Integration Preview

How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.

### Quick Start

**1. Add to your HTML `<head>`:**

```html
<link rel="stylesheet" href="path/to/style.css">
```

**2. Add before closing `</body>` tag:**

```html
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/ScrollTrigger.min.js"></script>
<script src="path/to/script.js"></script>
```

**3. Add the effect HTML anywhere in your `<body>`:**

```html
<div data-velocity-skew data-velocity-alternate="true">
  <h2 data-velocity-item>Momentum</h2>
  <h2 data-velocity-item>Is a feeling</h2>
  <h2 data-velocity-item>Flick it</h2>
</div>
```

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 |

### 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.

### Dependencies

**Required:**
- GSAP 3.12+
- ScrollTrigger plugin

**Optional:**
- Lenis (smooth scroll integration)

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Scroll Velocity Skew](https://gsapvault.com/effects/scroll-velocity-skew)
- [Effects & Templates Vault (£29 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)

## Judge the Code Quality First

These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):

- [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress.md): Four scroll progress visualization styles using GSAP ScrollTrigger. Includes animated bar, circle, rail track, and percentage counter indicators.
- [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal.md): Pure CSS scroll-triggered entrance animations. No JavaScript required. Uses native CSS scroll-driven animations for fade, slide, and scale effects.
- [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A layered hero section where background blobs, headline, and foreground labels scroll at different speeds, creating scrubbed parallax depth.

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt