Image Transition Slider

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.

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
• Scaled facade — source photograph
• Spiral gallery — source photograph
• Angular museum — source photograph
• Unsplash licence

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.