GSAP Image Galleries

Over 17

Ways to show a whole photo collection rather than one slide at a time: contact sheets you pan and zoom, filterable masonry, a pile of prints, dated archives with a timeline, fisheye spines and endless walls, most built to hold fifty images or more. 17 effects, 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

All172 ScrollZoomTextHoverImageRevealSlidersGalleriesSVGBackgroundWebGLLoadingLiquid

17 effects

    Contact Sheet Gallery - A photo gallery as contact sheets on an endless light table: drag, fling and pinch across roll after roll, zoom from an overview of a dozen sheets to one frame filling the stage, and tick off every frame you have seen New
    174 £7

    Contact Sheet Gallery

    A photo gallery as contact sheets on an endless light table: drag, fling and pinch across roll after roll, zoom from an overview of a dozen sheets to one frame filling the stage, and tick off every frame you have seen.

    draggablemomentum
    Typographic Index Gallery - Archive index gallery: a numbered serif list of 50 objects scrolls past a reading line while one preview frame wipes to the active entry's image, upwards going down the list and downwards going up New
    175 £7

    Typographic Index Gallery

    Archive index gallery: a numbered serif list of 50 objects scrolls past a reading line while one preview frame wipes to the active entry's image, upwards going down the list and downwards going up.

    clip-pathdirectional-transition
    Spine Accordion Gallery - A large photo gallery shown as 50 thin vertical spines across the full width; the pointer opens a fisheye panel that glides between photos, with click-to-hold, keyboard and touch-drag browsing New
    176 £7

    Spine Accordion Gallery

    A large photo gallery shown as 50 thin vertical spines across the full width; the pointer opens a fisheye panel that glides between photos, with click-to-hold, keyboard and touch-drag browsing.

    fisheyeaccordion
    Filter Reflow Gallery - A masonry photo gallery of 45 images with category filter chips; each filter change reflows the grid with GSAP Flip as a wave from the chip you pressed, and any photo opens in place across two columns with its caption New
    177 £7

    Filter Reflow Gallery

    A masonry photo gallery of 45 images with category filter chips; each filter change reflows the grid with GSAP Flip as a wave from the chip you pressed, and any photo opens in place across two columns with its caption.

    Flip flip-reflow
    Print Pile Gallery - A photo gallery as a pile of prints on a table: pick any print up, drag it, throw it and it slides to rest, turn it over to read the handwritten note on the back, and tidy the whole pile into a grid in one move New
    178 £7

    Print Pile Gallery

    A photo gallery as a pile of prints on a table: pick any print up, drag it, throw it and it slides to rest, turn it over to read the handwritten note on the back, and tidy the whole pile into a grid in one move.

    dragmomentum
    Archive Scrubber Gallery - A dated photo archive as a tunnel through time: each month is a cluster of photographs at its own depth, and scrolling, dragging or the timeline flies you forward and back through the year New
    179 Premium £15

    Archive Scrubber Gallery

    A dated photo archive as a tunnel through time: each month is a cluster of photographs at its own depth, and scrolling, dragging or the timeline flies you forward and back through the year. Stop, and the nearest month's photographs drift out of depth into a flat, readable grid; move again and they loosen back into the tunnel. Click any settled photo to open it full size.

    3d-transformsperspective
    Fisheye Grid Gallery - A photo grid that magnifies like a dock: the photo under the pointer, finger or keyboard focus grows to about twice its size while its rows and columns squeeze to make room, then opens full size from its own cell New
    180 £7

    Fisheye Grid Gallery

    A photo grid that magnifies like a dock: the photo under the pointer, finger or keyboard focus grows to about twice its size while its rows and columns squeeze to make room, then opens full size from its own cell.

    fisheyepointer-tracking
    Mosaic Flip Gallery - A photo wall whose tiles turn over to become one large photograph: hover a thumbnail and the tiles around it flip to show it several tiles wide, then scroll and the whole wall pins and turns, tile by tile, into each featured photo New
    181 £7

    Mosaic Flip Gallery

    A photo wall whose tiles turn over to become one large photograph: hover a thumbnail and the tiles around it flip to show it several tiles wide, then scroll and the whole wall pins and turns, tile by tile, into each featured photo.

    ScrollTrigger 3d-transforms
    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
    35mm Film Strip Gallery - A WebGL photo gallery on a strip of 35mm film running between two spinning rolls that fill and empty as you browse: frames sit as negatives and develop into the photograph at the centre, with momentum, motion blur and a lightbox
    128 £7

    35mm Film Strip Gallery

    A WebGL photo gallery on a strip of 35mm film running between two spinning rolls that fill and empty as you browse: frames sit as negatives and develop into the photograph at the centre, with momentum, motion blur and a lightbox.

    webgl-shaderdrag
    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
    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
    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
    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
    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

    Browse all 172 effects

    Quick view

    View product

    Loading demo

    Building Image Galleries with GSAP

    A gallery earns its place when a visitor can take in the size of a collection and still reach one photograph quickly. The galleries here each pick a different answer: everything visible at once and zoom in, a typed index with a preview, or a row that opens around the pointer.

    Large sets need care beyond the motion. These galleries start from a plain list of images that still works without JavaScript, load full-size photos only when they are shown, recycle elements instead of creating thousands, and run their animation from a single loop that sleeps when nothing moves.

    Every gallery works with touch and the keyboard, respects reduced motion and removes everything it added when torn down, so it can live inside a framework route or a CMS template.

    Galleries at a glance

    Compare the 17 galleries in this category by what they do, technique, and difficulty.
    Effect What it doesBuilt withDifficulty
    Contact Sheet Gallery A photo gallery as contact sheets on an endless light table: drag, fling and pinch across roll after roll, zoom from an overview of a dozen sheets to one frame filling the stage, and tick off every frame you have seen. draggable advanced
    Typographic Index Gallery Archive index gallery: a numbered serif list of 50 objects scrolls past a reading line while one preview frame wipes to the active entry's image, upwards going down the list and downwards going up. clip-path advanced
    Spine Accordion Gallery A large photo gallery shown as 50 thin vertical spines across the full width; the pointer opens a fisheye panel that glides between photos, with click-to-hold, keyboard and touch-drag browsing. fisheye advanced
    Filter Reflow Gallery A masonry photo gallery of 45 images with category filter chips; each filter change reflows the grid with GSAP Flip as a wave from the chip you pressed, and any photo opens in place across two columns with its caption. Flip, flip-reflow advanced
    Print Pile Gallery A photo gallery as a pile of prints on a table: pick any print up, drag it, throw it and it slides to rest, turn it over to read the handwritten note on the back, and tidy the whole pile into a grid in one move. drag advanced
    Archive Scrubber Gallery A dated photo archive as a tunnel through time: each month is a cluster of photographs at its own depth, and scrolling, dragging or the timeline flies you forward and back through the year. 3d-transforms advanced
    Fisheye Grid Gallery A photo grid that magnifies like a dock: the photo under the pointer, finger or keyboard focus grows to about twice its size while its rows and columns squeeze to make room, then opens full size from its own cell. fisheye advanced
    Mosaic Flip Gallery A photo wall whose tiles turn over to become one large photograph: hover a thumbnail and the tiles around it flip to show it several tiles wide, then scroll and the whole wall pins and turns, tile by tile, into each featured photo. ScrollTrigger, 3d-transforms advanced
    Infinite Draggable Gallery Draggable gallery with infinite looping, fisheye center-scale, and momentum physics. Observer, draggable intermediate
    35mm Film Strip Gallery A WebGL photo gallery on a strip of 35mm film running between two spinning rolls that fill and empty as you browse: frames sit as negatives and develop into the photograph at the centre, with momentum, motion blur and a lightbox. 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
    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
    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
    Photo Concertina A connected photographic print opens one image flat while its neighbours compress into deep paper pleats. 3d-transforms intermediate
    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

    Frequently asked questions

    How many images can these galleries hold?

    The newest galleries are built and tested with around fifty photos, and the contact sheet and spine accordion work from ten to sixty without changes. Full-size images load only when a photo is shown large, so a bigger set mainly costs the small thumbnails.

    Do the galleries work without JavaScript?

    Yes. Each one starts from an ordinary list of images and links, which is what visitors and search engines see if the script or its CDN fails.

    Can I feed a gallery from a CMS?

    Yes. The galleries read their photos from the page markup, so any CMS or framework that outputs a list of images with captions can drive them.

    Browse all effects What GSAP effects are
    Related categories
    Image AnimationsWebGL & Canvas