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.

38 effects, 1 free, no build step

Effects Pass

£50

Every current and future premium effect. Includes 99 items now, plus every future release in this line.

The Vault

£99

All 236 premium items in the Vault library, plus future additions to the library.

097 New £5

Fogged Glass Reveal

Look through a rain-covered window into a misty forest. Wipe away soft condensation while refractive beads gather at the edges and rivulets run down the glass.

webgl-shadermask-reveal

098 New £5

Sand Reveal

Brush uneven mounds of pale sand across a graphite board, leaving fine grain trails and gathering material into shaded piles.

canvaspointer-tracking

096 New £5

Scratch Card Reveal

Scratch silver foil to reveal a photograph or discount code. Permanent tracks, directional flakes and an optional automatic finish, switched off by default.

canvastouch-gestures

087 New £5

Scroll Hotspot Tour

A scroll-driven visual story that travels through one large image, flows between chapters and connects every event to its location with an accurate numbered timeline.

ScrollTrigger scroll-scrub

084 New £5

Threaded Image Slider

A photographic slider with a fuller row of images and restrained threads that fan vertically at the edges, with touch dragging, momentum and centre snapping.

webgl-shaderinfinite-loop

083 New £5

Image Transition Slider

A pinned photographic sequence where portrait panels rise, expand into panoramas and carry oversized project titles through the scroll.

ScrollTrigger scroll-scrub

082 New £5

Ink Fluid Reveal

Stir a photograph like ink in water. A real fluid simulation curls into eddies under your pointer and dissolves an ink-wash print to reveal the full-colour image, or a second photo, before it slowly heals.

webgl-shaderfluid-simulation

080 New Premium £10

Laptop Screen Scroll

A laptop opens on scroll, fills the viewport, then becomes the live website you keep scrolling through.

ScrollTrigger webgl-shader

079 New £5

Before / After Compare

A before-and-after reveal with a flexible image boundary. Drag the slim grip to bend the divider, flick to throw it, then watch the edge spring straight.

velocity-reactivebefore-after

085 New £5

Image Hotspot Explorer

A draggable image explorer where selecting a hotspot pans the scene into composition, routes a live connector around the subject and settles a detail card into the clear side of the frame.

image-hotspotsdrag-to-pan

074 £5

Lenticular Card

Tilt a ridged card to reveal an alpine lake from day to night, with optical interlacing, moving plastic highlights and a physical settle.

webgl-shader3d-transforms

071 £5

Warp Portfolio Reel

A seamless vertical portfolio carousel that bends into a sculptural photo ribbon as you scroll or drag, with a crisp project link on every slide.

webgl-shaderfisheye

072 £5

Lens Slider Wall

An infinite wall of sliding photographs that bow through a velocity lens and lift seamlessly into a large viewer.

webgl-shadervelocity-reactive

061 £5

Curved Ribbon Slider

A full-bleed WebGL slider driven by the scroll wheel. A distortion field sits in the middle of the container and bends whatever scrolls through it: the panel at the front stays flat and sharp while the ones either side curl away and smear into a spectrum, mirrored on both sides.

webgl-shaderchromatic-aberration

056 £5

Scroll Morph Mask Video

A looping surf film that never stops playing, seen through a vector mask that scroll morphs from a mark into the letterforms of a word, then zooms through a letter to full bleed. Flick and the mask breathes: it inflates, the edge splits into an accent and a chalk fringe, and the footage speeds up.

ScrollTriggerMorphSVG

041 £5

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

040 £5

Scroll Sequence Hero Transition

A scroll-scrubbed canvas image sequence hero that lifts into real page content, with Editorial, Serif, and Mono typographic presets.

ScrollTrigger image-sequence

015 £5

Scroll Image Sequence

Cinematic canvas frame scrubbing with an expanding aperture, synchronized caption crossfades, and reversible scroll progress.

ScrollTrigger scrub

033 £5

Scroll Video Scrub

Scroll drives a real video's playhead frame-by-frame while a horizontal track of chapters pans across the pinned footage. Apple-keynote scrub, one MP4 and a tween.

ScrollTrigger video-scrub

014 £5

FLIP Layout Morph

Shared-element layout transitions with GSAP Flip: a grid tile travels into a detail view while its neighbours reflow into a strip, swaps with any of them in one crossing move, and returns to its exact slot.

Flip flip-layout

003 £5

Infinite Draggable Gallery

Draggable gallery with infinite looping, fisheye center-scale, and momentum physics. Drag any direction to explore: cards near center grow larger.

Observer draggable

065 £5

Arc Offset Gallery

An infinite card slider where every card glides along a shallow arc, easing into focus with offset depth, gentle rotation and velocity-led motion.

Observer infinite-loop

070 £5

Squiggle Product Gallery

An infinite shoppable card gallery that follows a winding line, with wave-led tilt, soft momentum and clickable product actions.

infinite-loopcurved-path

006 £5

Liquid Morph Hover Effect

A GSAP liquid morph hover effect: images and headlines melt into viscous liquid, then reform. SVG filters, an optional WebGL shader, and a whole-page melt.

ScrollTriggerPixiJS

024 £5

SVG Blob Morph

Organic blob masks that morph between shapes with MorphSVGPlugin. Portraits live inside drifting blobs that settle into a circle on hover.

MorphSVG morphing

$Canvas Shape Vortex - A photoreal spiral galaxy on a 2D canvas: logarithmic arms, clustered star fields, additive bloom and diffraction spikes, flown by scroll and pointer with no WebGL$

018 £5

Canvas Shape Vortex

A photoreal spiral galaxy on a 2D canvas: logarithmic arms, clustered star fields, additive bloom and diffraction spikes, flown by scroll and pointer with no WebGL.

ScrollTrigger canvas

021 £5

Hover Image Trail

Velocity-aware image trail for a list of links: layered card drift, directional tilt, staggered decay, and static touch previews. Every card keeps its own photograph's shape. Pure GSAP core.

cursor-effectshover-effect

f05 Free

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

ScrollTrigger scroll-reveal

028 £5

3D Ring Gallery

A draggable 3D ring carousel where cards stand on a cylinder in real perspective. Flick it hard and it spins with momentum, motion blur, and a velocity-driven tilt before an elastic snap locks the nearest card front and centre. Opt in and each card becomes a button that spins to the front and Flips open into a full detail lightbox.

DraggableInertiaPlugin

029 £5

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

032 £5

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-filtershover-effect

037 £5

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-reactiveimage-slicing

042 £5

Fracture Reveal

Shatter any element into real Voronoi shards from the point you hit, then watch them reassemble with no seam left behind.

clip-pathvoronoi

043 £5

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.

physicscanvas

051 £5

Interactive Halftone Image

An image rendered live as a halftone dot grid the pointer drags through: dots swell, smear along the stroke and split into misregistered ink at speed, then settle back elastically.

canvashalftone

053 £5

Kinetic Shutter Blinds

Slices a hero design across a bank of 3D venetian louvres that crack open under the cursor in a proximity wave, revealing a second layer behind and a third printed on their reverse.

Observer 3d-transforms

055 £5

Elastic Photo Mesh

Interactive rubberized photo mesh: click, drag, or sweep across any image to stretch and warp the canvas texture with spring-mass physics, elastic tension, and gelatin reverberations.

canvasmesh-distortion

069 £5

Funhouse Portrait

Inflate noses, squeeze faces and twist smiles with a playful three.js portrait filter that springs back on release.

webgl-shaderfisheye

Browse all 108 effects

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.

1

Register ScrollTrigger

Load GSAP and ScrollTrigger and register the plugin.
2

Animate clip-path

Tween from an inset that hides the image to a fully open inset so it wipes into view.
3

Scrub to scroll

Set scrub: true and an ease of "none" so the reveal tracks the scrollbar rather than playing on its own clock.

Minimal example

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

Compare the 38 image animations in this category by what they do, technique, and difficulty.
Effect	What it does	Built with	Difficulty
Fogged Glass Reveal	Look through a rain-covered window into a misty forest.	webgl-shader	advanced
Sand Reveal	Brush uneven mounds of pale sand across a graphite board, leaving fine grain trails and gathering material into shaded piles.	canvas	advanced
Scratch Card Reveal	Scratch silver foil to reveal a photograph or discount code.	canvas	intermediate
Scroll Hotspot Tour	A scroll-driven visual story that travels through one large image, flows between chapters and connects every event to its location with an accurate numbered timeline.	ScrollTrigger, scroll-scrub	advanced
Threaded Image Slider	A photographic slider with a fuller row of images and restrained threads that fan vertically at the edges, with touch dragging, momentum and centre snapping.	webgl-shader	advanced
Image Transition Slider	A pinned photographic sequence where portrait panels rise, expand into panoramas and carry oversized project titles through the scroll.	ScrollTrigger, scroll-scrub	intermediate
Ink Fluid Reveal	Stir a photograph like ink in water.	webgl-shader	advanced
Laptop Screen Scroll	A laptop opens on scroll, fills the viewport, then becomes the live website you keep scrolling through.	ScrollTrigger, webgl-shader	advanced
Before / After Compare	A before-and-after reveal with a flexible image boundary.	velocity-reactive	intermediate
Image Hotspot Explorer	A draggable image explorer where selecting a hotspot pans the scene into composition, routes a live connector around the subject and settles a detail card into the clear side of the frame.	image-hotspots	advanced
Lenticular Card	Tilt a ridged card to reveal an alpine lake from day to night, with optical interlacing, moving plastic highlights and a physical settle.	webgl-shader	advanced
Warp Portfolio Reel	A seamless vertical portfolio carousel that bends into a sculptural photo ribbon as you scroll or drag, with a crisp project link on every slide.	webgl-shader	advanced
Lens Slider Wall	An infinite wall of sliding photographs that bow through a velocity lens and lift seamlessly into a large viewer.	webgl-shader	advanced
Curved Ribbon Slider	A full-bleed WebGL slider driven by the scroll wheel.	webgl-shader	advanced
Scroll Morph Mask Video	A looping surf film that never stops playing, seen through a vector mask that scroll morphs from a mark into the letterforms of a word, then zooms through a letter to full bleed.	ScrollTrigger, MorphSVG, video-mask	advanced
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 image sequence hero that lifts into real page content, with Editorial, Serif, and Mono typographic presets.	ScrollTrigger, image-sequence	advanced
Scroll Image Sequence	Cinematic canvas frame scrubbing with an expanding aperture, synchronized caption 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 with GSAP Flip: a grid tile travels into a detail view while its neighbours reflow into a strip, swaps with any of them in one crossing move, and returns to its exact slot.	Flip, flip-layout	intermediate
Infinite Draggable Gallery	Draggable gallery with infinite looping, fisheye center-scale, and momentum physics.	Observer, draggable	intermediate
Arc Offset Gallery	An infinite card slider where every card glides along a shallow arc, easing into focus with offset depth, gentle rotation and velocity-led motion.	Observer, infinite-loop	intermediate
Squiggle Product Gallery	An infinite shoppable card gallery that follows a winding line, with wave-led tilt, soft momentum and clickable product actions.	infinite-loop	intermediate
Liquid Morph Hover Effect	A GSAP liquid morph hover effect: images and headlines melt into viscous liquid, 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	A photoreal spiral galaxy on a 2D canvas: logarithmic arms, clustered star fields, additive bloom and diffraction spikes, flown by scroll and pointer with no WebGL.	ScrollTrigger, canvas	advanced
Hover Image Trail	Velocity-aware image trail for a list of links: 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 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
Interactive Halftone Image	An image rendered live as a halftone dot grid the pointer drags through: dots swell, smear along the stroke and split into misregistered ink at speed, then settle back elastically.	canvas	advanced
Kinetic Shutter Blinds	Slices a hero design across a bank of 3D venetian louvres that crack open under the cursor in a proximity wave, revealing a second layer behind and a third printed on their reverse.	Observer, 3d-transforms	intermediate
Elastic Photo Mesh	Interactive rubberized photo mesh: click, drag, or sweep across any image to stretch and warp the canvas texture with spring-mass physics, elastic tension, and gelatin reverberations.	canvas	advanced
Funhouse Portrait	Inflate noses, squeeze faces and twist smiles with a playful three.js portrait filter that springs back on release.	webgl-shader	advanced

Related guides

March 16, 2026

Apple-style scroll image sequences with GSAP and canvas

Build a scroll-driven image sequence with GSAP ScrollTrigger and canvas: frame preloading, WebP sizing, HiDPI rendering, and a reduced-motion fallback.

February 14, 2026

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.

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

Browse all effects What GSAP effects are