Quick Start
1. Add to your HTML <head>:
Code snippet omitted: it ships with the download.
2. Add the effect HTML anywhere in your <body>:
Code snippet omitted: it ships with the download.
Use the same image URL for .velocity-under-image and .velocity-original. The script builds its slats from .velocity-original after that image has loaded.
3. Add before the closing </body> tag:
Code snippet omitted: it ships with the download.
Options
Set these attributes on the element with data-velocity-slice.
| Attribute | Values | Default | Description |
|---|---|---|---|
data-slice-count |
6–20 |
14 |
Number of horizontal slats. The script clamps values to this range. |
data-slice-strength |
Positive pixels | 112 |
Maximum horizontal displacement at peak velocity. |
data-slice-rotation |
Degrees | 34 |
Maximum alternating rotateY angle. |
data-slice-depth |
Positive pixels | 120 |
Maximum translateZ fan depth. |
data-slice-sensitivity |
Positive number | 0.72 |
Converts pointer speed into the signed -1 to 1 velocity signal. |
data-slice-settle |
Seconds | 0.72 |
Duration of the zipper-like return animation. |
Values of 0 fall back to the defaults. Keep slice counts between 10 and 16 for the best balance of detail and rendering cost.
Image Setup
The included demo uses assets/stage.webp, a local 1600×1067 photograph, so it does not depend on a remote image host. Replace both image src values with your own asset. Wide photographs work best with the default 8 / 5 frame; update object-position for the under-image, original, and generated slice images together when the subject is off-centre.
The script waits for the source image's load event before cloning it into strips. This avoids blank slices when the image is not cached.
Accessibility
- The original image remains crisp and fully visible when JavaScript is unavailable.
prefers-reduced-motion: reduceskips slice generation and leaves the source image untouched.- The effect root is a semantic button with a visible orange focus ring.
- Enter and Space fire one complete burst and zipper settle.
- Focus mirrors the inviting hover state; blur and pointer leave always settle the image.
- On coarse pointers, a short tap triggers the complete effect. Vertical movement is not cancelled, so a swipe that starts over the image remains normal page scrolling.
- Keep meaningful alt text on
.velocity-original; the under-image and generated slats stay hidden from assistive technology.
Dependencies
Required:
- GSAP 3.12 or newer (GSAP core with CSSPlugin)
Not required:
- No GSAP plugins
- No Lenis
- No canvas or WebGL library
Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.
