Video Steps

Description Video Steps for Framer: interactive video navigation with styled 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

Jump to any key video moment.