How to Create a Video Scroll Progress Animation in Framer

Learn how to create a smooth scroll progress animation for your videos in Framer. This technique lets your videos play or animate based on how far users have scrolled, creating an interactive and modern browsing experience.

Why Use It

Scroll progress animations are a great way to make video content feel more dynamic and integrated into the flow of your page. They are often used in product pages, storytelling sites, or portfolio projects to create motion and focus as users scroll.

Step 1: Set Up Your Page

Start by creating a new page in Framer. Drag and drop your video onto the canvas. Position and resize it as needed to fit your layout.

Step 2: Create the Code Override File

Next, copy the code from the remix. Create a new file in your project called VideoScrollProgress and paste the code there.

Inside the code, you will find a variable called SCROLL_DISTANCE. This value controls how fast the animation progresses as you scroll:

• A smaller value makes the video scroll faster.

• A larger value makes the video scroll slower.

Adjust it to match the feeling you want for your design.

Step 3: Apply the Code Override

Open your Code Overrides panel in Framer. Add the VideoScrollProgress file and select the videoScrollProgress override.

Apply this override to your video component on the canvas.

Step 4: Preview and Test

Preview your project and scroll through the page. The video will now play or progress smoothly based on how far the user has scrolled.

The Result

You now have a fully functional scroll progress video animation in Framer. This effect adds a subtle but powerful layer of interactivity to your pages and works perfectly for storytelling, feature reveals, or immersive case studies.

This tutorial was created with the help of Giles Perry’s article Advanced Scroll Effects in Framer.