GSAP Image Effects
Visual-heavy animations that transform how images are displayed and interacted with. Scroll-driven sequences, draggable galleries, morphing layouts, and liquid transitions for portfolio and editorial sites.
Unlock everything for £39
All 89 premium effects and templates, plus every future effect and template we release. That's £0.43 per item.
Buy individually now: up to £10 comes off the Vault later
Animating Images with GSAP
Image-focused animations add depth to visual content. Instead of static grids, images can respond to scroll position, rearrange with smooth layout transitions, or sequence frame-by-frame like a video. These techniques are especially effective for portfolios, product showcases, and editorial layouts.
GSAP handles image animations efficiently by animating CSS transforms rather than manipulating image data directly. Scroll-driven image sequences swap canvas frames based on scroll progress. Draggable galleries use GSAP Draggable for inertia-based swiping. Layout morphs use GSAP Flip to animate between grid arrangements.
Performance with image-heavy animations requires attention to loading strategy. These effects use lazy loading for off-screen images, preload critical frames for sequences, and use IntersectionObserver to pause animations when they leave the viewport.
Each effect adapts to different screen sizes. Gallery layouts shift from multi-column to single-column. Scroll sequences adjust frame counts for mobile bandwidth. Draggable interactions translate from mouse to touch seamlessly.
How to reveal an image on scroll with GSAP
Wipe an image into view by scrubbing its clip-path against scroll position. Scrub ties the animation directly to the scrollbar so it plays forward and backward as the user moves.
- 01
Register ScrollTrigger
Load GSAP and ScrollTrigger and register the plugin.
- 02
Animate clip-path
Tween from an inset that hides the image to a fully open inset so it wipes into view.
- 03
Scrub to scroll
Set scrub: true and an ease of "none" so the reveal tracks the scrollbar rather than playing on its own clock.
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
gsap.from(".reveal-img", {
scrollTrigger: {
trigger: ".reveal-img",
start: "top 75%",
end: "top 30%",
scrub: true,
},
clipPath: "inset(100% 0 0 0)", // wipe up as it enters
ease: "none",
});Image Animations at a glance
| Effect | What it does | Built with | Difficulty |
|---|---|---|---|
| Split-Screen Hero Handoff | A cinematic video hero that opens as six alternating vertical shutters, pulling its headline apart and revealing real page content through the seams. | ScrollTrigger, canvas | advanced |
| Scroll Sequence Hero Transition | A scroll-scrubbed canvas sequence that lifts into real page content, with Editorial, Serif, and Mono visual presets. | ScrollTrigger, image-sequence | advanced |
| Scroll Image Sequence | Cinematic canvas frame scrubbing with an expanding aperture, synchronized chapter crossfades, and reversible scroll progress. | ScrollTrigger, scrub | intermediate |
| Scroll Video Scrub | Scroll drives a real video's playhead frame-by-frame while a horizontal track of chapters pans across the pinned footage. | ScrollTrigger, video-scrub | advanced |
| FLIP Layout Morph | Shared-element layout transitions powered by GSAP Flip, with a premium grid-to-detail archive showcase plus reusable lightbox and filter APIs. | Flip, flip-layout | intermediate |
| Infinite Draggable Gallery | Draggable gallery with infinite looping, fisheye center-scale, and momentum physics. | Observer, draggable | intermediate |
| Liquid Morph Gallery | Images and headlines dissolve into viscous liquid on hover, then reform. | ScrollTrigger, PixiJS, svg-filters | advanced |
| SVG Blob Morph | Organic blob masks that morph between shapes with MorphSVGPlugin. | MorphSVG, morphing | intermediate |
| Canvas Shape Vortex | Luminous 3D canvas shapes spiral through a depth tunnel that bends and blooms with fast pointer movement—no WebGL required. | canvas | advanced |
| Hover Image Trail | Velocity-aware editorial image trail with layered card drift, directional tilt, staggered decay, and static touch previews. | cursor-effects | intermediate |
| Image Clip Reveal | A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its editorial caption lands. | ScrollTrigger, scroll-reveal | beginner |
| 3D Ring Gallery | A draggable 3D ring carousel where cards stand on a cylinder in real perspective. | Draggable, InertiaPlugin, Flip, 3d-transforms | advanced |
| Scroll Zoom Portal | Pinned scroll section where a small framed panel zooms up to swallow the viewport, parting the headline around it, so scrolling feels like stepping through a portal into the next scene. | ScrollTrigger, pinning | intermediate |
| Liquid Ripple Image | A liquid image hover effect: dragging the cursor over an image distorts the pixels like water, rippling from the pointer and settling back to a crisp, calm pool. | svg-filters | intermediate |
| 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. | velocity-reactive | intermediate |
| Fracture Reveal | Shatter any element into real Voronoi shards from the point you hit, then watch them reassemble with no seam left behind. | clip-path | advanced |
| Cloth Drape | A hanging fabric banner you can grab, drag and swing: a soft-body cloth simulation that warps your artwork across it and shades its own folds. | physics | advanced |
Related Guides
Apple-Style Scroll Image Sequences
Create a scroll-driven image sequence that plays through frames as users scroll. Uses GSAP ScrollTrigger and canvas for smooth frame-by-frame playback.
Read guide
Animation for Content Editors
You manage the website content, but animations feel like a black box. Learn the vocabulary, know what's possible, and talk to developers effectively.
Read guideFrequently Asked Questions
How do scroll image sequences work?
A scroll image sequence loads a series of images (frames) and displays them based on scroll position, similar to scrubbing through a video. As the user scrolls, GSAP ScrollTrigger maps the scroll progress to a frame number, drawing the corresponding image on a canvas element.
Will image animations slow down my page?
Not with proper optimization. These effects lazy-load images, use efficient canvas rendering for sequences, and animate transform properties only. Test with realistic image sizes on your target devices to verify performance.
Can I use these effects with a CMS?
Yes. The effects work with any image source, including CMS-hosted images. Point the image URLs to your CMS media library, and the animations work the same way. The code is framework-agnostic and CMS-agnostic.
What image formats work best with these effects?
WebP offers the best balance of quality and file size for web animations. For scroll sequences, JPEG works well for photographic content. Use responsive images with srcset to serve appropriate sizes for different viewports.