---
title: "Expand Media Story — Framer component · Best of Framer"
description: "$10.00 · Framer component · by sherwin · Sections. Scroll-Scrub Video & Collage"
canonical: "https://framer.elliotli.dev/component/expand-media-story"
---

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

# Expand Media Story

Scroll-Scrub Video & Collage

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

![Expand Media Story preview image 1](https://framer.elliotli.dev/og/component/expand-media-story/6d94999f6314727c/1600x1200.jpg)

## Summary

Scroll-Scrub Video & Collage

## Description

Create immersive storytelling experiences with an expanding image or video hero, scroll-scrub or autoplay video, animated floating collages, and editorial story chapters.

Transforms scrolling into an interactive journey. Start with a compact hero surrounded by floating media, then seamlessly expand into a full-screen cinematic stage with smooth transitions and engaging storytelling. Perfect for product launches, portfolios, brand campaigns, and editorial websites.

**Image or Video Hero** Choose between a responsive image or video hero and switch anytime without rebuilding your layout.

**Flexible Video Playback** Choose how your video plays:

-   **Scroll Scrub** — Sync playback to page scrolling for a cinematic, frame-by-frame experience.
    
-   **Autoplay** — Play videos automatically with optional looping and muted playback.
    

Customize scrub start/end, smoothness, FPS, looping, mute, and poster images.

**Expanding Hero Animation** Transform a compact hero into a full-screen immersive experience as visitors scroll.

**Floating Media Collage** Create dynamic compositions with animated floating images featuring Drift, Orbit, Wave, Magnetic, or Static motion. Includes hover parallax, custom positioning, and an optional fullscreen lightbox with zoom and pan.

**Editorial Storytelling** Build chapter-based stories.

**Adaptive Media Overlays** Improve text readability with adaptive overlays that respond to each story chapter.

**Interactive Navigation** Optional chapter indicators let visitors quickly navigate through your story.

**Fully Customizable** Customize typography, colors, overlays, shadows, image masks, spacing, motion timing, scroll distance, media positioning, and floating collage behavior.

**Responsive & Accessible** Optimized for desktop and mobile with responsive layouts, reduced-motion support, keyboard accessibility, and Framer Canvas compatibility.

**Perfect For:** Product Launches • Brand Storytelling • SaaS • Portfolios • Fashion & Luxury • Editorial Websites • Photography • Creative Campaigns.

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

-   All · #3799

## Details

- **Author**: sherwin
- **Price**: $10.00
- **Published**: 2026-07-29
- **Updated**: 2026-10-03
- **Added**: 2026-07-29
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes