About Video Steps
Description
Video Steps for Framer: interactive video navigation with styled steps.
The Video Steps component allows you to create interactive video timelines with labeled steps that jump to specific timestamps. Perfect for walkthroughs, tutorials, onboarding, and storytelling. Each step is fully customizable—visually and structurally—so you can match your brand and layout with ease.
This component is mobile-responsive and offers horizontal scrolling for steps when needed. It also includes a dynamic progress bar with a draggable control and a tick indicator.
Customization
You can customize all the content:
Video Source—Upload or use your own hosted url for a MP4, MOV, or WEBM file. External links, such as YouTube or Vimeo, aren’t supported yet.
Steps—Set step titles, descriptions, and timestamps
Scrollable Steps—Enable horizontal scroll for mobile
Minimum Step Width—Control responsive behavior when scroll is enabled
You can customize all the styles:
Step Background, Padding, and Layout
Step Counter—Border, font, color, active color, and spacing
Title—Font, color, active color, margin
Description—Font and color
Progress Bar—Color and tick indicator color
Usage
To use the component:
Copy and paste it into your Framer canvas.
Upload your video file or use a default one.
Add and configure your steps in the sidebar.
Customize the styling to match your project.
Step Properties
Title—Text for the step title
Description—Text
Timestamp—Time in seconds where the video jumps on click
Step Styles
Background Color—Step background
Padding—Inner padding for steps
Counter—Styles for the step number
Title—Styles for the step title
Description—Styles for the step description
Video & Progress
Video Url — Use your self-hosted video url. Supports .mp4, .mov, and .webm. For better performance, consider hosting your videos on a CDN. External links, such as YouTube or Vimeo, aren’t supported yet.
Video Upload — Upload a video. Supports .mp4, .mov, and .webm
Progress Bar Color—Color of the timeline fill
Progress Tick Color—Color of the draggable tick
Layout
Scroll Steps—Toggle horizontal scroll for mobile
Minimum Step Width—Width of each step in scroll mode
This component is ideal for:
Interactive tutorials
Feature walkthroughs
Product showcases
Course content
Storytelling experiences
