---
title: "Scroll Expand Media — Free Framer component · Best of Framer"
description: "Free Framer component · by Desmond · Sections. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/scroll-expand-media"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Scroll Expand Media

# Scroll Expand Media

Ordinary to immersive

[View on Framer](https://framer.com/marketplace/components/scroll-expand-media/?via=elliot-li)

![Scroll Expand Media preview image 1](https://framer.elliotli.dev/og/component/scroll-expand-media/b65080a5ae1f782e/1600x1200.jpg)

## Summary

Ordinary to immersive

## Description

### Intro

Turn ordinary media into an immersive scroll moment. Start with a framed image or connected Framer canvas, then expand it toward the viewport as the story unfolds—without relying on brittle layout tricks.

### How it works

The component grows from explicit starting dimensions toward a padded or edge-to-edge viewport state. In stacks, its expansion can naturally push sibling content aside, making the motion feel connected to the composition instead of layered on top of it.

### Features

-   MEDIA — Image or one connected canvas slot, with original-size alignment or viewport-cover scaling.
    
-   TRIGGER — Scrub expansion directly with scroll, or autoplay when a chosen section enters the viewport.
    
-   SIZE — Set the initial width and height, then choose edge-to-edge or padded viewport expansion.
    
-   CORNERS — Use one radius or tune each corner; keep it fixed or animate it smoothly toward zero.
    
-   MOTION — For autoplay, tune easing, custom duration, spring timing, bounce, delay, viewport position, and replay.
    

### Quick setup

1.  Add an image or connect one canvas element.
    
2.  Give the target page section a unique element ID.
    
3.  Paste that exact ID into Scroll Section ID.
    
4.  Choose On Scroll for direct scrubbing or Autoplay for a timed reveal.
    
5.  Tune starting size, viewport padding, and corner behavior—then test every breakpoint.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1147

## Details

- **Author**: Desmond
- **Published**: 2026-07-12
- **Updated**: 2026-07-13
- **Added**: 2026-07-12
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove