# Velocity Slice Image > A velocity-reactive image effect that peels one photograph into alternating horizontal slats with directional depth, warm edge light, and a zipper-like settle. Canonical: https://gsapvault.com/effects/velocity-slice-image Live demo: https://gsapvault.com/demos/velocity-slice-image/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | intermediate | | Plugins | Core GSAP only | | Techniques | velocity-reactive, image-slicing, 3d-transforms, hover-effect, stagger | | Uses Lenis | No | ## Overview A cinematic image-slice effect that turns a fast horizontal pointer whip into a dramatic dimensional fan. GSAP core measures direction and speed, then drives alternating slat displacement, rotateY depth, translateZ, motion smear, orange edge light, and a darkened under-image from the same velocity signal. When movement stops, the photograph rebuilds in a clearly ordered zipper with restrained back easing instead of snapping flat. Touch users get a complete tap-triggered burst, keyboard users can fire it with Enter or Space, and reduced-motion or no-JavaScript visitors keep the original crisp image. ## Features - Horizontal velocity controls the strength and direction of every slice in real time - Fourteen configurable slats fan in alternating directions for a bold break-frame moment - rotateY and translateZ add true perspective depth rather than a flat hover offset - Directional blur, orange edge fringe, and under-image darkening share the same velocity input - Zipper-like staggered return uses restrained back easing for a crafted settle - Rapid direction changes interrupt and replace the current animation without stranded slices - Tap, Enter, and Space controls trigger a complete peak burst and automatic settle - No-JavaScript and prefers-reduced-motion fallbacks preserve the untouched source image ## Use Cases - Editorial hero photography that needs a cinematic interactive signature - Film and theatre campaign pages with dramatic cast or production imagery - Fashion lookbooks where pointer speed can reinforce movement and attitude - Creative agency case studies that benefit from one memorable image interaction - Album and event launches with high-impact art direction and tactile mobile feedback ## How It Works The script duplicates the source image into horizontal clipping strips only after the image has loaded and motion is allowed. Pointer delta divided by elapsed time becomes a signed velocity value; GSAP quickSetter functions apply each frame's x, rotationY, translateZ, and filter values while alternating slice multipliers create the fan. Separate scaleX and scaleY setters are used through gsap.set for the under-image response, avoiding unsupported compound scale quick setters. After 95 milliseconds without meaningful movement, a GSAP timeline takes control and returns the slats to zero with a direction-aware stagger and back.out easing. Pointer leave uses the same settle path, while tap and keyboard activation run a designed peak impulse before handing off to that zipper timeline. ## 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 ``:** ```html ``` **2. Add the effect HTML anywhere in your ``:** ```html ``` 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 `` tag:** ```html ``` ### 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. ### Accessibility - The original image remains crisp and fully visible when JavaScript is unavailable. - `prefers-reduced-motion: reduce` skips 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 ## 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 Velocity Slice Image](https://gsapvault.com/effects/velocity-slice-image) - [Effects & Templates Vault (£39 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): - [Hover Underline](https://gsapvault.com/effects/hover-underline.md): Animated link underlines with three GSAP variants: an exit-through slide, a marker-style fill sweep, and a hand-drawn SVG wave. One data attribute per link. - [Image Clip Reveal](https://gsapvault.com/effects/image-clip-reveal.md): Images reveal on scroll with an animated clip-path wipe and a Ken Burns settle, the inner image easing from 1.25 scale down to 1 as the mask opens. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt