Media Gallery Scroll Showcase

Key Features for Scroll-Reveal Media Galleries

Build a pinned media story with full-screen image or video, animated gallery tiles, responsive motion, optional CTA content, and custom playback behavior.

Get App

Full-Screen Media Opening

Start with a 100vh image or video layer that fills the section before the scroll-driven gallery animation takes over.

Scroll-Pinned GSAP Transition

Pin the main wrapper while GSAP moves the opening media upward and brings gallery tiles into view as shoppers scroll.

Responsive Image or Video Source

Choose image or video mode, with separate mobile media options, so the opening scene adapts across screen sizes.

Optional Play and Pause Controls

When native controls are disabled, show custom play and pause icons that update to reflect current video playback.

Animated Three-Column Gallery

Reveal gallery tiles in three columns, animate them from opposite directions, then spread and scale the grid for visual impact.

Centered Heading and CTA Content

Layer a centered heading over the animation, then reveal supporting copy and an optional linked button later in the scroll.

Up to Eighteen Gallery Images

Add up to three Image blocks, each with six image pickers, creating a gallery of up to 18 individual tiles.

Responsive Mobile Motion

Below 768px, the gallery uses smaller tiles, tighter gaps, a stronger scale effect, and mobile-specific media where available.

Media Gallery Scroll Showcase Settings & Options

Control opening media, playback, overlays, CTA content, typography, colors, gallery styling, and image blocks.

Section Settings

Applies to the whole section

Choose image or video mode with desktop and mobile media.

Media Source Setup

Set autoplay, loop, mute, controls, and custom play button.

Video Playback Controls

Adjust overlay color and opacity over the opening media.

Media Overlay Style

Edit the centered heading, rich text, CTA label, and link.

Content & CTA Setup

Adjust heading, content, button, and gallery image styling.

Typography & Media

Customize section, text, button, and hover colors.

Color Style Controls

Set gallery image corner radius for all animated tiles.

Gallery Image Radius

Add Section

Block Settings

Applies to each image block

Upload the gallery image in this block.

Gallery Image

Add Section

Where This Section Can Be Used

Use this immersive media section across Shopify pages to introduce campaigns, collections, products, or brand stories with a cinematic scroll-to-gallery transition.

Home Page
Collection Page
Product Page
Landing Page

Home Page

Lead With a Cinematic Media-to-Gallery Story

Use Media Gallery Scroll Showcase as a homepage statement piece that starts with full-screen media, then reveals a dynamic image gallery and supporting content as visitors scroll.

Create a high-impact opening with full-screen media

Reveal supporting gallery imagery through scroll motion

Layer a concise heading over the visual experience

Add a CTA for campaign or collection navigation

Use mobile-specific media for better small-screen framing

Collection Page

Add Editorial Motion Around Collection Browsing

Place the section on collection templates to introduce seasonal edits, lookbooks, or category stories with a large media opener and animated supporting images.

Introduce a collection with cinematic visual storytelling

Show supporting imagery without replacing the product grid

Use gallery tiles for campaign or editorial context

Link shoppers to a focused collection destination

Adapt the experience with separate mobile media

Product Page

Support Products With Rich Visual Storytelling

Use the section on product pages to present lifestyle media, detailed imagery, or campaign visuals before revealing a grid of supporting product-focused images.

Show lifestyle or detail media around a featured product

Reveal extra imagery through a guided scroll sequence

Use a focused CTA for related products or collections

Keep supporting copy hidden until later in the animation

Use mobile media to improve crop and composition

Landing Page

Build Immersive Campaign and Editorial Experiences

Use Media Gallery Scroll Showcase on landing pages to combine a full-screen campaign opener, animated gallery tiles, centered messaging, and a linked CTA into a single scroll-led section.

Open with campaign media at full viewport height

Use GSAP motion to create a staged visual reveal

Show up to eighteen supporting campaign images

Add concise copy and a clear campaign destination

Create responsive motion for desktop and mobile

Why Choose Media Gallery Scroll Showcase for Your Store?

Turn static media into an immersive scroll-led experience with full-screen opening visuals, animated gallery reveals, responsive sources, and flexible CTA content.

Media Gallery Scroll Showcase section benefits

Immersive Scroll-Led Storytelling

Combine full-screen media, animated gallery tiles, responsive sources, and focused CTA content to create a richer visual journey.

Create a cinematic full-screen entrance before the gallery appears

Use image or video media with separate mobile source options

Animate gallery tiles with GSAP and ScrollTrigger-based motion

Show up to eighteen gallery images through three image blocks

Reveal supporting copy and CTA content later in the scroll

Offer custom play and pause controls when native controls are off

Keep gallery imagery consistent with global radius and color styling

Do This, Skip That.

DO

Use compressed video or imagery to keep the opening scene fast
Choose gallery images with a consistent visual style and crop
Keep the main heading concise for the two-line display limit
Test the full pinned scroll sequence on desktop and mobile
Use a clear CTA destination that matches the visual story

DON'T

Do not upload heavy video files that slow initial page loading
Do not mix unrelated gallery imagery that weakens the story
Do not rely on autoplay audio because browsers may block it
Do not use long descriptions that compete with the animation
Do not ignore mobile-specific media when desktop crops fail

Frequently Asked Questions

Can I use either an image or a video as the opening media?

Yes. Source Type lets you choose Image or Video, with separate desktop and mobile media fields available for the selected source type.

How many gallery images can I add to Media Gallery Scroll Showcase?

The section allows up to three Image blocks, each containing six image pickers, so the gallery can contain up to eighteen images.

How does the scroll animation work in this section?

GSAP pins the full-screen wrapper, moves the opening media upward, brings gallery tiles into view, scales the grid, tightens gaps, and reveals the description.

Can I use different media on mobile and desktop?

Yes. Both image and video modes include optional mobile media fields. When mobile media exists, separate responsive classes are applied.

What happens if I leave some gallery image fields empty?

Each empty gallery image slot renders a neutral placeholder image, so every block still contributes six tiles to the animated gallery.

Can shoppers play and pause the video without native controls?

Yes. If native controls are disabled and the play button option is enabled, custom play and pause icons control all videos in the media wrapper.

When does the description and CTA become visible?

They begin to collapse and expand later in the GSAP timeline, after the gallery starts moving into its final spread and scaled composition.

Can I use Media Gallery Scroll Showcase inside header or footer groups?

No. The schema disables this section in Shopify header and footer groups, so add it within the supported page-template section areas.

Help Center

We're Here to Help: We believe in providing exceptional customer support!

For Support or any Questions Email Us: [email protected]

Ready When You Are: Add Media Gallery Scroll Showcase to Your Store

Install SectionHub and add the Media Gallery Scroll Showcase section to your theme in minutes - no coding required.