083
AI ready

Image Transition Slider

£7
or the whole Vault, £99
Skip the demo Open in new tab

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

ScrollTrigger Lenis intermediate
4 more details
scroll-scrubpinningexpanding-panelsparallax

Released

About this effect

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.

Read the full effect overview

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.

Image Transition Slider - GSAP animation effect preview

What's included

8 items
  • Portrait panels rise and expand into full-width photographs
  • Outgoing images recede while oversized titles travel separately
  • Smooth 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

Perfect for

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

How it works

1 section

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.

Plugins ScrollTrigger
Difficulty Intermediate
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

The Vault opens this source and the whole library.

Each product gives you the HTML, CSS and JavaScript source, the full documentation and an AI setup prompt, licensed for unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£99 Get the Vault See what you get

One payment, over 300 products, and future additions to the library.

Documentation

Quick Start

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

In your downloadThe working code for this step, in index.html.

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

In your downloadThe working code for this step, in index.html.

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

In your downloadThe working code for this step, in index.html.

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 scrolls the document, with no internal scroller, and the demo smooths wheel input with Lenis at 0.5s. For native scrolling, delete the Lenis script tag or set data-smooth="off" on <html>. If the page already has a window.lenis, the gallery uses it and leaves its setup and teardown to the host. 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

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.

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.
  • Lenis 1.3 for smooth scrolling in the demo; optional.
  • No canvas, WebGL or runtime build system is required.
  • Mona Sans is loaded from Google Fonts for the demo and can be removed.

Also in your download: the full source, worked examples, the events and programmatic API, and the class reference.

£7