How to Create a Video Scroll Progress Animation in Framer

Learn How to Create a Scroll Progress Animation for Your Videos in Framer.

Clément Lionne

Hire

8 min read

Sep 8, 2023

Preview

Remix Project

Remix

Table of Contents

In this quick guide, you'll learn how to create a simple scroll progress animation for your videos using Framer.

Setting Up Your Page

Begin by creating a new page and simply drag and drop your video onto it.

Creating the Code Override File

Copy and paste the code below into a new code file called VideoScrollProgress in your project. Feel free to adjust the SCROLL_DISTANCE value to control the animation speed. Smaller values make it faster, while larger values make it slower.

import type { ComponentType } from "react"
import { useEffect } from "react"
import { useScroll, useTransform } from "framer-motion"
export function videoScrollProgress(Component): ComponentType {
    const SCROLL_START = 0 // Scroll position when animation starts
    const SCROLL_DISTANCE = 500 // Scroll distance after which animation ends
    const SCROLL_END = SCROLL_START + SCROLL_DISTANCE
    return (props) => {
        // useScroll() returns the current scroll position
        const { scrollY } = useScroll()
        // Calculate the scroll progress from 0 to 1
        const progress = useTransform(
            scrollY,
            [SCROLL_START, SCROLL_END],
            [0, 1]
        )
        // Pass the progress as a prop to the original component
        return 
    }
}

Applying the Code Override

In your code override settings, add the VideoScrollProgress file and select the videoScrollProgress override.

That's it! You've successfully added a scroll progress animation to your videos.
I created this animation with the help of the article named Advanced Scroll Effects in Framer by Giles Perry.

Don't forget to share this post!

Related Resources

Components

Custom code

Animations

New Framer Particles Component

Learn how to use the new Framer Particles Component to create beautiful animations.

By Clément Lionne

7 min read

Components

Animations

Custom code

Text Scroll Reveal

The Framer Text Scroll Reveal component allows you to create text reveal animation triggered by scroll position.

By Clément Lionne

4 min read

CMS

Components

Tutorials

How to Create a Table of Contents for CMS Collections in Framer

Learn How to Create a Custom Table of Contents in Framer.

By Clément Lionne

7 min read

Blog

Framer Pricing Plans 2025 - Discounts & Costs Guide

Explore Framer pricing plans for 2025. Get the perfect web-building plan, unlock promo codes, and understand costs to fit your goals.

By Clément Lionne

12 min read

Custom code

Tutorials

How to Truncate Text with Framer Code Override

Learn How to use Truncate Text Code Override in your Framer Project.

By Clément Lionne

8 min read

Dynamic Viewports and Relative Units in Framer

Custom code

Tutorials

How to use Dynamic Viewports and Relative Units in Framer

Learn How to use Dynamic Viewport units (svh, lvh, dvh) and relative units (vh, vw, vmax, vmin, em, rem) in Framer projects.

By Clément Lionne

9 min read

Animations

Tutorials

How to Create a Horizontal Scroll Animation in Framer

Learn How to Create a Horizontal Scroll Animation in Framer.

By Clément Lionne

7 min read

Analytics

Custom code

Tutorials

How to Track UTM Parameters in Framer Forms

Learn How to Capture and Track UTM Parameters in Framer Forms Using Custom Code Overrides

By Clément Lionne

6 min read

Components

Custom code

Tutorials

Download Button

Streamline file sharing with Framer's Download Button component, allowing you to create downloadable resources for any element.

By Clément Lionne

4 min read

Components

Custom code

Animations

New Framer Particles Component

Learn how to use the new Framer Particles Component to create beautiful animations.

By Clément Lionne

7 min read

Components

Animations

Custom code

Text Scroll Reveal

The Framer Text Scroll Reveal component allows you to create text reveal animation triggered by scroll position.

By Clément Lionne

4 min read

CMS

Components

Tutorials

How to Create a Table of Contents for CMS Collections in Framer

Learn How to Create a Custom Table of Contents in Framer.

By Clément Lionne

7 min read

Blog

Framer Pricing Plans 2025 - Discounts & Costs Guide

Explore Framer pricing plans for 2025. Get the perfect web-building plan, unlock promo codes, and understand costs to fit your goals.

By Clément Lionne

12 min read

Custom code

Tutorials

How to Truncate Text with Framer Code Override

Learn How to use Truncate Text Code Override in your Framer Project.

By Clément Lionne

8 min read

Custom code

Tutorials

How to use Dynamic Viewports and Relative Units in Framer

Learn How to use Dynamic Viewport units (svh, lvh, dvh) and relative units (vh, vw, vmax, vmin, em, rem) in Framer projects.

By Clément Lionne

9 min read

Get in Touch

Have questions about our Framer components or need help with your project? Fill out the form below and we'll get back to you as soon as possible.

Get in Touch

Have questions about our Framer components or need help with your project? Fill out the form below and we'll get back to you as soon as possible.

Get in Touch

Have questions about our Framer components or need help with your project? Fill out the form below and we'll get back to you as soon as possible.

Get in Touch

Have questions about our Framer components or need help with your project? Fill out the form below and we'll get back to you as soon as possible.