GSAP Image Effects

Over 50+

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. 57 effects, 1 free, no build step.

The Vault. Every item in the library, including the Vault exclusives, and everything added to it.

£99 Get the Vault See inside the Vault Browse these effects

Browse effects

Category

All164 ScrollZoomTextHoverImageRevealSlidersSVGBackgroundWebGLLoadingLiquid

57 effects

    Prism Glass Hero - A WebGL launch hero with a solid 3D glass object floating over your own headline and photograph, refracting them with real per-channel dispersion New
    171 £7

    Prism Glass Hero

    A WebGL launch hero with a solid 3D glass object floating over your own headline and photograph, refracting them with real per-channel dispersion. Grab it and throw it: it flies on its momentum, bounces off the edges and springs home, and the faster it moves the further the type splits into a spectrum. Prism, lens, torus or your own logo extruded from an SVG.

    webgl-shaderrefraction
    Lens Focus Pull Scroll - Pinned scroll section that works a camera lens: focus pulls from the city to the photographer with real depth-of-field blur, a focus ring and aperture ring turn past an index mark, the lens stops down until both planes sharpen, and the shutter fires to leave a printed photo New
    170 £7

    Lens Focus Pull Scroll

    Pinned scroll section that works a camera lens: focus pulls from the city to the photographer with real depth-of-field blur, a focus ring and aperture ring turn past an index mark, the lens stops down until both planes sharpen, and the shutter fires to leave a printed photo.

    ScrollTrigger pinning
    Keyhole Zoom - Pinned scroll section that flies the camera through a keyhole in a door, carrying a painted headline off with it, and lands on the picture behind at full bleed under a closing message New
    162 £7

    Keyhole Zoom

    Pinned scroll section that flies the camera through a keyhole in a door, carrying a painted headline off with it, and lands on the picture behind at full bleed under a closing message.

    ScrollTrigger pinning
    Postcard Flip Zoom - Pinned scroll section where a postcard writes its own handwritten note, turns over in real 3D as it grows, and its picture side lands exactly full bleed New
    163 £7

    Postcard Flip Zoom

    Pinned scroll section where a postcard writes its own handwritten note, turns over in real 3D as it grows, and its picture side lands exactly full bleed.

    ScrollTrigger pinning
    Ring Align Zoom - Pinned scroll section where a product photo cut into concentric rings spins back into alignment like a combination lock until it clicks together, then the circle opens to full bleed New
    164 £7

    Ring Align Zoom

    Pinned scroll section where a product photo cut into concentric rings spins back into alignment like a combination lock until it clicks together, then the circle opens to full bleed.

    ScrollTrigger pinning
    Dolly Zoom - Pinned scroll section that plays the Vertigo dolly zoom: the subject holds perfectly still at the same size while the corridor behind her pulls slowly away through doorway after doorway, then a closing line lands over the finished photograph New
    165 £7

    Dolly Zoom

    Pinned scroll section that plays the Vertigo dolly zoom: the subject holds perfectly still at the same size while the corridor behind her pulls slowly away through doorway after doorway, then a closing line lands over the finished photograph.

    ScrollTrigger pinning
    Nested Scroll Zoom - Pinned scroll section that flies the camera through a window in one picture into the next, and on through every opening in turn, until the last picture lands full bleed under a closing message New
    155 £7

    Nested Scroll Zoom

    Pinned scroll section that flies the camera through a window in one picture into the next, and on through every opening in turn, until the last picture lands full bleed under a closing message.

    ScrollTrigger pinning
    Image Tile Assemble - Pinned scroll section where loose tiles cut from one photograph float around a headline, then pull into register wave by wave until the seams close into a single full-bleed picture with a closing message on top New
    156 £7

    Image Tile Assemble

    Pinned scroll section where loose tiles cut from one photograph float around a headline, then pull into register wave by wave until the seams close into a single full-bleed picture with a closing message on top.

    ScrollTrigger pinning
    Cut-out Breakout Zoom - Pinned scroll section where a cut-out dancer spins through twelve frames per turn as you scroll, with silk that keeps moving, in front of a huge headline while a narrow card opens to full bleed behind her New
    159 £7

    Cut-out Breakout Zoom

    Pinned scroll section where a cut-out dancer spins through twelve frames per turn as you scroll, with silk that keeps moving, in front of a huge headline while a narrow card opens to full bleed behind her.

    ScrollTrigger pinning
    Floor to Wall Zoom - Pinned 3D scroll section where a photo lying flat on the ground stands up towards the viewer, passes in front of the headline on the wall behind it, and lands square and full bleed New
    157 £7

    Floor to Wall Zoom

    Pinned 3D scroll section where a photo lying flat on the ground stands up towards the viewer, passes in front of the headline on the wall behind it, and lands square and full bleed.

    ScrollTrigger pinning
    Photo Reel Zoom - Pinned scroll section where a small frame flicks through aligned photographs like a flipbook as it grows to full bleed, with hard colour cuts around a subject who stays put, then a closing message over the final picture New
    161 £7

    Photo Reel Zoom

    Pinned scroll section where a small frame flicks through aligned photographs like a flipbook as it grows to full bleed, with hard colour cuts around a subject who stays put, then a closing message over the final picture.

    ScrollTrigger pinning
    Datamosh Transition - A WebGL image slider that changes slide like a broken video file: drag sideways and the current photograph is dragged along in square macroblocks, the next one surfaces in its colours, then the frame heals block by block in a stepped sweep
    133 £7

    Datamosh Transition

    A WebGL image slider that changes slide like a broken video file: drag sideways and the current photograph is dragged along in square macroblocks, the next one surfaces in its colours, then the frame heals block by block in a stepped sweep.

    webgl-shaderglitch
    RGB Split Infinite Canvas - An endless WebGL field of photographs you drag in any direction, with no walls: at speed every print splits into red, green and blue reads along its own direction of travel, while the print under your hand lifts and stays sharp
    135 £7

    RGB Split Infinite Canvas

    An endless WebGL field of photographs you drag in any direction, with no walls: at speed every print splits into red, green and blue reads along its own direction of travel, while the print under your hand lifts and stays sharp.

    webgl-shaderdrag
    Photo Concertina - A connected photographic print opens one image flat while its neighbours compress into deep paper pleats
    111 £7

    Photo Concertina

    A connected photographic print opens one image flat while its neighbours compress into deep paper pleats. Drag, tap or select to transfer the opening.

    3d-transformspaper-fold
    Fogged Glass Reveal - Look through a rain-covered window into a misty forest
    097 £7

    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
    Sand Reveal - Brush uneven mounds of pale sand across a graphite board, leaving fine grain trails and gathering material into shaded piles
    098 £7

    Sand Reveal

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

    canvaspointer-tracking
    Scratch Card Reveal - Scratch silver foil to reveal a photograph or discount code
    096 £7

    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
    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
    087 £7

    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
    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
    084 £7

    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
    Image Transition Slider - A pinned photographic sequence where portrait panels rise, expand into panoramas and carry oversized project titles through the scroll
    083 £7

    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
    Ink Fluid Reveal - Stir a photograph like ink in water
    082 £7

    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
    Laptop Screen Scroll - A laptop opens on scroll, fills the viewport, then becomes the live website you keep scrolling through
    080 Premium £15

    Laptop Screen Scroll

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

    ScrollTrigger webgl-shader
    Phone Screen Scroll - A real 3D phone, built in three
    109 £7

    Phone Screen Scroll

    A real 3D phone, built in three.js, stands pinned in the page and turns as you scroll: front, three-quarter, edge-on, then the back with its camera module, while its screen changes between your screenshots. One img tag per screen. GSAP scrubs the pose; three.js draws it.

    ScrollTrigger webgl-shader
    Before / After Compare - A before-and-after reveal with a flexible image boundary
    079 £7

    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
    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
    085 £7

    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
    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
    074 £7

    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
    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
    071 £7

    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
    Lens Slider Wall - An infinite wall of sliding photographs that bow through a velocity lens and lift seamlessly into a large viewer
    072 £7

    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
    Curved Ribbon Slider - A full-bleed WebGL slider driven by the scroll wheel
    061 £7

    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
    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
    056 £7

    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
    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
    041 £7

    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
    Scroll Sequence Hero Transition - A scroll-scrubbed canvas image sequence hero that lifts into real page content, with Editorial, Serif, and Mono typographic presets
    040 £7

    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
    Scroll Image Sequence - Cinematic canvas frame scrubbing with an expanding aperture, synchronized caption crossfades, and reversible scroll progress
    015 £7

    Scroll Image Sequence

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

    ScrollTrigger scrub
    Scroll Video Scrub - Scroll drives a real video's playhead frame-by-frame while a horizontal track of chapters pans across the pinned footage
    033 £7

    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
    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
    014 £7

    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
    Infinite Draggable Gallery - Draggable gallery with infinite looping, fisheye center-scale, and momentum physics
    003 £7

    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
    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
    065 £7

    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
    Squiggle Product Gallery - An infinite shoppable card gallery that follows a winding line, with wave-led tilt, soft momentum and clickable product actions
    070 £7

    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
    Liquid Morph Hover Effect - A GSAP liquid morph hover effect in WebGL: photographs melt into thick, glossy liquid that sags, smears and drips, then pull back together crisp Refreshed
    006 £7

    Liquid Morph Hover Effect

    A GSAP liquid morph hover effect in WebGL: photographs melt into thick, glossy liquid that sags, smears and drips, then pull back together crisp.

    webgl-shadermorphing
    SVG Blob Morph - Organic blob masks that morph between shapes with MorphSVGPlugin
    024 £7

    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 £7

    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
    Hover Image Trail - Velocity-aware image trail for a list of links: layered card drift, directional tilt, staggered decay, and static touch previews
    021 £7

    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
    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
    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
    3D Ring Gallery - A draggable 3D ring carousel where cards stand on a cylinder in real perspective
    028 £7

    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
    Photo Sphere Gallery - A grid of photos folds into a spinning 3D sphere you can fling around, then flies into a cube, a heart or back into a grid at the press of a button
    121 £7

    Photo Sphere Gallery

    A grid of photos folds into a spinning 3D sphere you can fling around, then flies into a cube, a heart or back into a grid at the press of a button. Click any photo to lift it out at full size.

    3d-transformsmorphing
    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
    029 £7

    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
    Liquid Ripple Image - A WebGL water ripple for any image: drag across it and rings of waves spread from the pointer, cross and interfere, bending the picture, then settle to a calm pool Refreshed
    032 £7

    Liquid Ripple Image

    A WebGL water ripple for any image: drag across it and rings of waves spread from the pointer, cross and interfere, bending the picture, then settle to a calm pool.

    webgl-shaderwave-simulation
    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
    037 £7

    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
    Fracture Reveal - Shatter any element into real Voronoi shards from the point you hit, then watch them reassemble with no seam left behind
    042 £7

    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
    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
    043 £7

    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
    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
    051 £7

    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
    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
    053 £7

    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
    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
    055 £7

    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
    Funhouse Portrait - Inflate noses, squeeze faces and twist smiles with a playful three
    069 £7

    Funhouse Portrait

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

    webgl-shaderfisheye
    Reactive Face Mesh - Pull any part of a portrait out like taffy and the face reacts: eyes follow your hand, widen in surprise, blink as it snaps back
    122 £7

    Reactive Face Mesh

    Pull any part of a portrait out like taffy and the face reacts: eyes follow your hand, widen in surprise, blink as it snaps back.

    webgl-shadermesh-distortion
    Pixel Sort Drag - A WebGL pixel sort you paint with the pointer: drag across a photograph and the pixels in your wake smear into luminance-sorted streaks, fine on a slow move and torn wide open on a fast flick, then relax back into the clean image
    107 £7

    Pixel Sort Drag

    A WebGL pixel sort you paint with the pointer: drag across a photograph and the pixels in your wake smear into luminance-sorted streaks, fine on a slow move and torn wide open on a fast flick, then relax back into the clean image.

    webgl-shaderglitch
    Slit-Scan Stretch - A full-bleed photograph read through a moving slit, like a 1970s photo-finish camera: sweep across it and the picture smears into long streaks that trail the pointer's path, fringed with colour, then retract into the slit and settle
    108 £7

    Slit-Scan Stretch

    A full-bleed photograph read through a moving slit, like a 1970s photo-finish camera: sweep across it and the picture smears into long streaks that trail the pointer's path, fringed with colour, then retract into the slit and settle. three.js and one shader; GSAP core runs the media branching, the load sweep and the release.

    webgl-shaderchromatic-aberration

    Browse all 164 effects

    Quick view

    View product

    Loading demo

    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 comes down to loading and rendering. Frame sequences load their frames outward from the current scroll position so the nearest ones are ready first, and the fluid simulations stop drawing when they leave the viewport.

    The effects adapt to different screen sizes. Gallery layouts shift from multi-column to single-column, the scroll-driven image sequence shortens its scroll distance on small screens, and draggable interactions work with touch as well as the mouse.

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

      Register ScrollTrigger

      Load GSAP and ScrollTrigger and register the plugin.

    2. 2

      Animate clip-path

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

    3. 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 57 image animations in this category by what they do, technique, and difficulty.
    Effect What it doesBuilt withDifficulty
    Prism Glass Hero A WebGL launch hero with a solid 3D glass object floating over your own headline and photograph, refracting them with real per-channel dispersion. webgl-shader advanced
    Lens Focus Pull Scroll Pinned scroll section that works a camera lens: focus pulls from the city to the photographer with real depth-of-field blur, a focus ring and aperture ring turn past an index mark, the lens stops down until both planes sharpen, and the shutter fires to leave a printed photo. ScrollTrigger, pinning advanced
    Keyhole Zoom Pinned scroll section that flies the camera through a keyhole in a door, carrying a painted headline off with it, and lands on the picture behind at full bleed under a closing message. ScrollTrigger, pinning advanced
    Postcard Flip Zoom Pinned scroll section where a postcard writes its own handwritten note, turns over in real 3D as it grows, and its picture side lands exactly full bleed. ScrollTrigger, pinning advanced
    Ring Align Zoom Pinned scroll section where a product photo cut into concentric rings spins back into alignment like a combination lock until it clicks together, then the circle opens to full bleed. ScrollTrigger, pinning advanced
    Dolly Zoom Pinned scroll section that plays the Vertigo dolly zoom: the subject holds perfectly still at the same size while the corridor behind her pulls slowly away through doorway after doorway, then a closing line lands over the finished photograph. ScrollTrigger, pinning advanced
    Nested Scroll Zoom Pinned scroll section that flies the camera through a window in one picture into the next, and on through every opening in turn, until the last picture lands full bleed under a closing message. ScrollTrigger, pinning advanced
    Image Tile Assemble Pinned scroll section where loose tiles cut from one photograph float around a headline, then pull into register wave by wave until the seams close into a single full-bleed picture with a closing message on top. ScrollTrigger, pinning intermediate
    Cut-out Breakout Zoom Pinned scroll section where a cut-out dancer spins through twelve frames per turn as you scroll, with silk that keeps moving, in front of a huge headline while a narrow card opens to full bleed behind her. ScrollTrigger, pinning advanced
    Floor to Wall Zoom Pinned 3D scroll section where a photo lying flat on the ground stands up towards the viewer, passes in front of the headline on the wall behind it, and lands square and full bleed. ScrollTrigger, pinning advanced
    Photo Reel Zoom Pinned scroll section where a small frame flicks through aligned photographs like a flipbook as it grows to full bleed, with hard colour cuts around a subject who stays put, then a closing message over the final picture. ScrollTrigger, pinning intermediate
    Datamosh Transition A WebGL image slider that changes slide like a broken video file: drag sideways and the current photograph is dragged along in square macroblocks, the next one surfaces in its colours, then the frame heals block by block in a stepped sweep. webgl-shader advanced
    RGB Split Infinite Canvas An endless WebGL field of photographs you drag in any direction, with no walls: at speed every print splits into red, green and blue reads along its own direction of travel, while the print under your hand lifts and stays sharp. webgl-shader advanced
    Photo Concertina A connected photographic print opens one image flat while its neighbours compress into deep paper pleats. 3d-transforms intermediate
    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
    Phone Screen Scroll A real 3D phone, built in three.js, stands pinned in the page and turns as you scroll: front, three-quarter, edge-on, then the back with its camera module, while its screen changes between your screenshots. 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 in WebGL: photographs melt into thick, glossy liquid that sags, smears and drips, then pull back together crisp. webgl-shader 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
    Photo Sphere Gallery A grid of photos folds into a spinning 3D sphere you can fling around, then flies into a cube, a heart or back into a grid at the press of a button. 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 WebGL water ripple for any image: drag across it and rings of waves spread from the pointer, cross and interfere, bending the picture, then settle to a calm pool. webgl-shader advanced
    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
    Reactive Face Mesh Pull any part of a portrait out like taffy and the face reacts: eyes follow your hand, widen in surprise, blink as it snaps back. webgl-shader advanced
    Pixel Sort Drag A WebGL pixel sort you paint with the pointer: drag across a photograph and the pixels in your wake smear into luminance-sorted streaks, fine on a slow move and torn wide open on a fast flick, then relax back into the clean image. webgl-shader advanced
    Slit-Scan Stretch A full-bleed photograph read through a moving slit, like a 1970s photo-finish camera: sweep across it and the picture smears into long streaks that trail the pointer's path, fringed with colour, then retract into the slit and settle. webgl-shader advanced

    Related guides

    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
    Related categories
    Scroll EffectsHover & CursorWebGL & Canvas