---
title: "Story Player — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Ahmet Loca · Players. story player component for Framer with smooth progress bar animation, tap navigation, and auto-play support."
canonical: "https://framer.elliotli.dev/component/storyplayer"
---

[Home](/)/[Components](/components)/[Players](/components/category/players)/Story Player

# Story Player

Instagram-Style Story Player

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

![Story Player preview image 1](https://framer.elliotli.dev/og/component/storyplayer/905d6ff63bee375c/1600x1200.jpg)

## Summary

story player component for Framer with smooth progress bar animation, tap navigation, and auto-play support.

## Description

**MORE FRAMER COMPONENTS LIKE THIS**

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

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

## **About Story Player**

Story Player is an Instagram-style story player component for Framer with smooth progress bar animation, tap navigation, and auto-play support. Add up to three videos or images that play sequentially — bringing native social media story interactions to any Framer website or landing page.

Each story slot supports both video and image content. Videos play automatically at their natural duration while images use a customizable timer. Tap left to go back, tap right to skip forward, hold to pause — exactly how your users already expect stories to work. Hover to reveal navigation arrows.

**Key Features**

-   Instagram-style story progress bar with smooth 60fps animation
    
-   Video and image support per story slot
    
-   Auto-play on story change
    
-   Tap navigation — left to go back, right to skip forward
    
-   Hover to reveal left and right navigation arrows
    
-   Hold to pause, release to resume
    
-   Auto play and loop toggle
    
-   Custom username and avatar image
    
-   Fully customizable progress bar — color, height, gap, padding
    
-   Border color, width, and toggle control
    
-   Adjustable border radius
    

**Best For**

-   Brand story sections on landing pages
    
-   Product launch and feature reveal sequences
    
-   Portfolio and case study presentations
    
-   Social proof and testimonial slideshows
    
-   Fashion, beauty, and lifestyle websites
    
-   Mobile-first Framer projects
    

**Where to Use**

-   Hero sections with sequential video storytelling
    
-   Product detail and showcase pages
    
-   Agency and creative portfolio sites
    
-   SaaS onboarding and feature walkthrough flows
    
-   E-commerce product highlight sections
    

**How to Use**

1.  Add **StoryPlayer** to your Framer canvas
    
2.  Select Type (Video or Image) for each slot
    
3.  Upload your source file
    
4.  Set duration for image slots
    
5.  Add your username and avatar
    
6.  Customize progress bar style and border
    

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

-   All · #7691

## Details

- **Author**: Ahmet Loca
- **Price**: $4.00
- **Published**: 2026-05-29
- **Updated**: 2026-09-30
- **Added**: 2026-05-16
- **Categories**: Players

## More like this

-   [Cozy Video Card](/component/cozy-video-card) — 日香理 / hikari · $1 — A cozy card for your YouTube video
-   [A/B Audio Player Pro](/component/a-b-audio-player-pro) — Injamul Haque Somrat · $24 — Master Audio Comparison Player
-   [Reelflow](/component/reelflow) — Quaders · Free — An auto video ticker for reels
-   [Mux Video](/component/mux-video) — NorthGarden · $3 — Drop Mux video into any Framer site with full control over playback, UI, and interaction.