Expand Media on Scroll

What You'll Create

As visitors scroll down the page, an image or video dramatically expands from a contained size to fill the entire viewport. The media element stays sticky while growing, creating a cinematic reveal effect that draws attention to key visual content.

The Problem It Solves

Static images and videos don't create the same impact as scroll-triggered animations. Creating smooth, scroll-linked scaling effects typically requires advanced JavaScript knowledge and animation libraries. This technique brings professional scroll animations to Squarespace with minimal setup.

Perfect For

Hero sections with dramatic reveals, Product showcase pages, Portfolio project intros, Brand story sections, Landing page visual impact.

What Makes This Different

The expansion is tied directly to your scroll position—the further you scroll, the larger the media grows, creating a satisfying connection between your movement and the visual change. The effect uses the GSAP animation library for buttery-smooth performance. Works with both images and videos, and you can customize how much the media expands.

Details

• Section Type: Fluid Engine

• Code Type: CSS + JavaScript

• Prerequisites: Section with #expand-media anchor, Image with 'expand-media' in alt text OR Video with #expand-media link in description, GSAP library

• Toolkit Title: Expand Media on Scroll

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support