# GSAP Image Effects

> GSAP image animation effects. Scroll-driven sequences, draggable galleries, layout morphs, and liquid transitions for visual-heavy websites.

Canonical: https://gsapvault.com/categories/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.

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

```js
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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/scroll-image-sequence) | Cinematic canvas frame scrubbing with an expanding aperture, synchronized chapter crossfades, and reversible scroll progress. | ScrollTrigger, scrub | intermediate |
| [Scroll Video Scrub](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/infinite-draggable-gallery) | Draggable gallery with infinite looping, fisheye center-scale, and momentum physics. | Observer, draggable | intermediate |
| [Liquid Morph Gallery](https://gsapvault.com/effects/liquid-morph) | Images and headlines dissolve into viscous liquid on hover, then reform. | ScrollTrigger, PixiJS, svg-filters | advanced |
| [SVG Blob Morph](https://gsapvault.com/effects/svg-blob-morph) | Organic blob masks that morph between shapes with MorphSVGPlugin. | MorphSVG, morphing | intermediate |
| [Canvas Shape Vortex](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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](https://gsapvault.com/effects/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 |

## Effects in This Category

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

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/split-screen-hero-handoff)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/split-screen-hero-handoff.md)

### Scroll Sequence Hero Transition

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

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/scroll-sequence-hero-transition)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/scroll-sequence-hero-transition.md)

### Scroll Image Sequence

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

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/scroll-image-sequence)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/scroll-image-sequence.md)

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

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/scroll-video-scrub)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/scroll-video-scrub.md)

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

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/flip-layout-morph)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/flip-layout-morph.md)

### Infinite Draggable Gallery

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

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/infinite-draggable-gallery)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/infinite-draggable-gallery.md)

### Liquid Morph Gallery

Images and headlines dissolve into viscous liquid on hover, then reform. SVG filters for the gallery, an optional WebGL shader for display type, and one control that melts the whole page.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/liquid-morph)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/liquid-morph.md)

### SVG Blob Morph

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

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/svg-blob-morph)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/svg-blob-morph.md)

### Canvas Shape Vortex

Luminous 3D canvas shapes spiral through a depth tunnel that bends and blooms with fast pointer movement—no WebGL required.

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/canvas-shape-vortex)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/canvas-shape-vortex.md)

### Hover Image Trail

Velocity-aware editorial image trail with layered card drift, directional tilt, staggered decay, and static touch previews. Pure GSAP core.

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/hover-image-trail)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/hover-image-trail.md)

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

- Tier: free · Difficulty: beginner
- [View effect](https://gsapvault.com/effects/image-clip-reveal)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/image-clip-reveal.md)

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

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/3d-ring-gallery)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/3d-ring-gallery.md)

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

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/scroll-zoom-portal)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/scroll-zoom-portal.md)

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

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/liquid-ripple-image)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/liquid-ripple-image.md)

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

- Tier: premium · Difficulty: intermediate
- [View effect](https://gsapvault.com/effects/velocity-slice-image)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/velocity-slice-image.md)

### Fracture Reveal

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

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/fracture-reveal)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/fracture-reveal.md)

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

- Tier: premium · Difficulty: advanced
- [View effect](https://gsapvault.com/effects/cloth-drape)
- [Clean Markdown for AI agents](https://gsapvault.com/effects/cloth-drape.md)

## Related Tutorials

- [Apple-Style Scroll Image Sequences](https://gsapvault.com/blog/scroll-image-sequence-tutorial) ([Markdown](https://gsapvault.com/blog/scroll-image-sequence-tutorial.md)): Create a scroll-driven image sequence that plays through frames as users scroll. Uses GSAP ScrollTrigger and canvas for smooth frame-by-frame playback.
- [Animation for Content Editors](https://gsapvault.com/blog/animation-for-content-editors) ([Markdown](https://gsapvault.com/blog/animation-for-content-editors.md)): 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.

## Related Categories

- [GSAP Scroll Animations](https://gsapvault.com/categories/gsap-scroll-animations)
- [GSAP Card Animations](https://gsapvault.com/categories/gsap-card-animations)
- [GSAP Hover Effects](https://gsapvault.com/categories/gsap-hover-effects)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt