---
title: "Story Section — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Ahmet Loca · Sections. Story Section An Instagram-style story carousel with up to 4 image or video slides, auto-advancing progress bars, mute control,…"
canonical: "https://framer.elliotli.dev/component/story-section"
---

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

# Story Section

Story carousel with swipe control

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

![Story Section preview image 1](https://framer.elliotli.dev/og/component/story-section/784f5f5b8d15aadc/1600x1200.jpg)

## Summary

Story Section An Instagram-style story carousel with up to 4 image or video slides, auto-advancing progress bars, mute control, swipe and keyboard navigation, customizable…

## Description

**MORE FRAMER COMPONENTS LIKE THIS**

**✦ Browse +38 FREE + 85 premium components:** [**https://frameze.com/components**](https://frameze.com/components)

**✦ Carousel Bundle:** [**https://frameze.com/components/category/carousels?ref=bundles**](https://frameze.com/components/category/carousels?ref=bundles)

## About Story Section

An Instagram-style story carousel with up to 4 image or video slides, auto-advancing progress bars, mute control, swipe and keyboard navigation, customizable thumbnails, captions and a CTA button. Pauses off-screen, fully accessible and editor-safe.

Full-screen hero section that plays like a story. Videos, images, or both.

A full-screen story-style hero player with smooth crossfade transitions, clickable thumbnail navigation, and per-story CTA buttons. Supports video and image sources. Built for brands that move.

**Features**

-   Up to 4 stories — mix video and image freely
    
-   Smooth crossfade transitions with cinematic gradient overlays
    
-   Clickable progress bar — jump to any story instantly
    
-   Thumbnail navigation — vertical or horizontal, 4 positions
    
-   Per-story CTA button with custom text, link, color, background, font, and radius
    
-   Swipe support for mobile (touch gestures)
    
-   Keyboard navigation — ← → to switch, Space to pause
    
-   Mute / unmute button for video stories
    
-   Long-press to pause, release to resume
    
-   Auto play and loop controls
    
-   Fully customizable progress bar — color, height, gap, padding
    
-   Counter display (01 / 04 style)
    
-   Responsive — works on mobile, tablet, and desktop
    

**Where to Use**

StorySection fits any Framer project where storytelling drives engagement:

-   **Fashion & lifestyle brands** — collection launches, lookbook hero sections
    
-   **Agency portfolios** — project showcases, case study openers
    
-   **E-commerce** — product highlight reels, seasonal campaigns
    
-   **Events & concerts** — full-screen atmosphere-building heroes
    
-   **Travel & hospitality** — destination stories, tour highlights
    
-   **Media & publishing** — episode teasers, featured content spotlights
    
-   **SaaS & app sites** — feature demos, onboarding showcases
    

• **Photography & creative portfolios** — presenting photo series like film

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

-   All · #7041

## Details

- **Author**: Ahmet Loca
- **Price**: $5.00
- **Published**: 2026-06-26
- **Updated**: 2026-09-29
- **Added**: 2026-06-26
- **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