# Image Transition Slider

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

Canonical: https://gsapvault.com/effects/pixel-dissolve-transition
Live demo: https://gsapvault.com/demos/pixel-dissolve-transition/index.html

| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | intermediate |
| Plugins | ScrollTrigger |
| Techniques | scroll-scrub, pinning, expanding-panels, parallax |
| Uses Lenis | No |

## Lighthouse, as measured

Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page.

| Category | Score |
|----------|-------|
| Accessibility | 100 |
| Best practices | 100 |

No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live.

## Overview

Scroll through a sequence of architectural studies. The next photograph rises as a narrow portrait panel, then opens into a full-width image while the previous photograph recedes. Large project titles move at their own pace.

Native scrolling controls the entire sequence, including held positions and immediate reversal. Each project has a readable pause, with chapter navigation for direct access. Reduced-motion visitors receive a normal, unpinned sequence of photographs.

## Features

- Portrait panels rise and expand into full-width photographs
- Outgoing images recede while oversized titles travel separately
- Native scroll scrubbing with direct reversal
- Readable pauses between projects
- Compact chapter navigation and overall progress
- Responsive desktop and mobile composition
- Unpinned readable sequence for reduced motion and no JavaScript
- Scoped GSAP lifecycle and complete teardown

## Use Cases

- Architecture and photography project stories
- Design portfolio case-study sequences
- Editorial photographic features
- Campaign image narratives

## Vibe-Code Ready Setup

This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested.

[How AI-assisted setup works](https://gsapvault.com/vibe-coding)

## How It Works

Scroll naturally to advance through the pinned image sequence. Each incoming portrait panel rises and grows into the full stage as its title arrives. Continue scrolling to the next project, reverse to revisit a transition, or use the chapter buttons to jump to a project.

## Documentation

How this effect works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download.

### Quick Start

**In your HTML head**, load the stylesheet and optional enhancement class:

_Code snippet omitted: it ships with the download._

**Inside the page body**, add a gallery. Keep every article visible in the initial markup so the page works without JavaScript:

_Code snippet omitted: it ships with the download._

**Before closing the body**, load GSAP, ScrollTrigger and the effect:

_Code snippet omitted: it ships with the download._

### Using It With Your Own Design

The required structure is a `data-scroll-gallery` root containing `data-scroll-frame`, `data-project-stage` and at least two `data-project` articles. Each article needs one `data-project-photo` wrapper and one `data-project-title`. Its `data-title` supplies the chapter announcement. Use consecutive zero-based `data-chapter` values on optional native navigation buttons. The count, progress bar and live status hooks are optional.

Replace the demo font, colours, header, footer and project copy freely. Use high-resolution photographs that remain convincing as both portrait and landscape crops. `object-fit:cover` deliberately changes the visible crop as a panel grows. Keep intrinsic image dimensions and descriptive alt text.

Preserve the layout contract: `.is-scroll-live` makes the frame one viewport tall, positions the stage and projects, and clips the moving panels and titles inside the stage. Keep that clipping so incoming content never obscures chapter controls. The non-enhanced styles must remain ordinary document flow with visible articles. The title's shade protects white text against bright photography; adjust it if changing text or image colours.

The script adds the live class only when both dependencies exist and reduced motion is off. Missing GSAP, missing ScrollTrigger and no-JS visitors see all projects in normal flow. No pre-hidden articles or extra blank spacer should be added to your markup; ScrollTrigger owns and removes its pin spacer.

The gallery uses native document scrolling. It does not intercept wheel or touch events, create an internal scroller, or install Lenis. When integrating with an existing smooth-scroll system, keep that system's normal ScrollTrigger update wiring. Route cleanup must call `revert()` before removing the gallery DOM.

### Options

Set options on the gallery root before initialization.

| Attribute | Values | Default | Description |
|---|---|---|---|
| `data-scroll-distance` | `0.5`–`4` | `1.4` | Viewport heights of scroll distance per image transition |

The photograph rise, expansion, outgoing retreat and title movement are coordinated on one timeline. A short hold before each transition creates a readable pause; the sequence remains fully reversible. There is no autoplay, drag gesture, wheel-to-next handler or automatic snapping.

### Accessibility

Native vertical scrolling works with a mouse wheel, touch, keyboard, scrollbar or trackpad. Chapter buttons are keyboard-operable and expose `aria-current`. The live status announces the current project as it becomes readable. Off-stage project content is removed from the accessibility tree only while the pinned presentation is active.

With `prefers-reduced-motion: reduce`, the pinning and animations are removed and every article is readable in normal flow. Changing the preference while mounted tears down or recreates the appropriate presentation. No-JS and missing-dependency visitors receive the same complete document-flow fallback.

### Images

The bundled WebP files are resized, cropped and colour-treated derivatives of Unsplash photography. They are example content, not an exclusive image licence. Replace the files and their alt text with your own work for a production gallery.

- [Terracotta architecture — source photograph](https://images.unsplash.com/photo-1486718448742-163732cd1544)
- [Scaled facade — source photograph](https://images.unsplash.com/photo-1493397212122-2b85dda8106b)
- [Spiral gallery — source photograph](https://images.unsplash.com/photo-1439337153520-7082a56a81f4)
- [Angular museum — source photograph](https://images.unsplash.com/photo-1487958449943-2429e8be8625)
- [Unsplash licence](https://unsplash.com/license)

The repository's `assets/img-manifest.json` records stock IDs and baked grading. Inside the GSAP Vault development repository, edit the manifest and run `bun scripts/build-template-assets.ts pixel-dissolve-transition --force`. In your own project, replace the image files directly; that image builder is not a runtime dependency.

### Dependencies

- GSAP 3.12+ and ScrollTrigger; the demo is pinned to GSAP 3.15.0.
- A browser supporting modern CSS viewport units and transforms.
- No canvas, WebGL, Lenis or runtime build system is required.
- Mona Sans is loaded from Google Fonts for the demo and can be removed.

## What You Get

- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library

## Get the Code

This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required for our code. Bundled third-party assets retain their own licences and attribution requirements. The only restrictions: no redistribution of the code itself and no competing effect libraries.

- [Buy Image Transition Slider](https://gsapvault.com/effects/pixel-dissolve-transition)
- [The Vault (£99 one-time, best value): every collection in the Vault library, plus future items added to those collections](https://gsapvault.com/effects)

## Judge the Code Quality First

These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):

- [Scroll Progress Indicator](https://gsapvault.com/effects/scroll-progress.md): A precise GSAP reading-progress indicator in four shapes: a top bar, an SVG ring, a side rail, and a numeric percentage.
- [CSS Scroll Reveal](https://gsapvault.com/effects/css-scroll-reveal.md): Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript.
- [Parallax Hero](https://gsapvault.com/effects/parallax-hero.md): A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer.

---

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