---
title: "Video Steps — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Concealed · Interactive. Description Video Steps for Framer: interactive video navigation with styled steps."
canonical: "https://framer.elliotli.dev/component/video-steps"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Video Steps

# Video Steps

Jump to any key video moment.

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

![Video Steps preview image 1](https://framer.elliotli.dev/og/component/video-steps/c5c627d205164409/1600x1200.jpg)

## Summary

Description Video Steps for Framer: interactive video navigation with styled steps.

## Description

## 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:

1.  Copy and paste it into your Framer canvas.
    
2.  Upload your video file or use a default one.
    
3.  Add and configure your steps in the sidebar.
    
4.  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
    

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

-   All · #8736

## Details

- **Author**: Concealed
- **Price**: $12.00
- **Published**: 2025-11-03
- **Updated**: 2026-04-14
- **Added**: 2025-10-06
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase