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.
About This Effect
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.
What's Included
- 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
Perfect For
- 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.