StoryPlayer 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
Add StoryPlayer to your Framer canvas
Select Type (Video or Image) for each slot
Upload your source file
Set duration for image slots
Add your username and avatar
Customize progress bar style and border
Ahmet Loca
