How to Create a Video Scroll Progress Animation in Framer
Sep 8, 2023
In this quick guide, you'll learn how to create a simple scroll progress animation for your videos using Framer.
Step 1: Setting Up Your Page
Begin by creating a new page and simply drag and drop your video onto it.
Step 2: 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.
Step 3: 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.
Share this article