Story Player

MORE FRAMER COMPONENTS LIKE THIS

✦ Browse +38 FREE + 85 premium components: https://frameze.com/components

✦ Device Bundle: 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