Animations, Layout & Design

Triggering video playback on scroll in Framer

Triggering video playback on scroll in Framer

Triggering video playback on scroll in Framer

Justin

·

3:45

·

8.9K views

·

Dec 12, 2025

About this lesson

In this lesson, we’re setting up a video that plays on scroll using scroll variants, and we’re keeping the whole workflow super clean and code-free. We'll cover how to place your video, wrap it in a simple component, create paused and playing variants, and then tell Framer exactly when that video should kick in as the user scrolls.

https://www.youtube.com/watch?v=QXmPOjccivI&t=0s Introduction

https://www.youtube.com/watch?v=QXmPOjccivI&t=35s Add Video

https://www.youtube.com/watch?v=QXmPOjccivI&t=83s Create Variants

https://www.youtube.com/watch?v=QXmPOjccivI&t=138s Add the Scroll Interaction

https://www.youtube.com/watch?v=QXmPOjccivI&t=195s Wrap Up

Project Remix Link: https://framer.com/remix/a3Bi1nfl3GEdCTu3kUVk

Sign up: https://framer.link/yt

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Videos can add a powerful layer of 0:02storytelling to a website. And sometimes 0:04the timing of when they start [music] is 0:06just as important as the video itself.0:09Instead of having it play right away, we 0:11might want that moment of motion to 0:13happen further down the page, exactly 0:16when it [music] supports the story we're 0:17trying to tell. That's why in this 0:20video, we're going to look at how to 0:22control exactly when a video starts 0:24[music] playing as someone scrolls. and 0:27we'll do it all without any code.0:33To get started, we'll head to layout and 0:35select video or press shiftV on our 0:38keyboard and then drag a video component 0:41right onto the canvas wherever [music]0:43we want it placed. Now, we'll head over 0:46to the properties panel and either 0:47upload a video file or paste in the 0:50video's URL. I'll be using this really 0:52cool animation from Ben Fritz as my 0:55example. From here, we can adjust any 0:57other settings we need to. For example,1:00I don't need my video to loop. So, I'll 1:03set loop to no. With our video set,1:06we'll [music] press command return to 1:08wrap the video in a regular frame. And 1:11then press shift A to turn that frame 1:14into a stack. This sets both the width 1:17and [music] the height to fit content,1:19which gives us a clean autosizing 1:21container for the [music] video. Next,1:23we'll rightclick our stack and select 1:26create component or hit command option K 1:29on our keyboard. Then, we'll name our 1:32new component. I'll just call it 1:34autoplay video. Okay, so now that our 1:37video is wrapped inside a new component,1:39we'll create a couple of variants for 1:41it. [music] For the first variant, we'll 1:43rename it to paused and then head to the 1:45video's properties in the right panel to 1:48set the playing property to no. Then 1:51we'll create a second variant, [music]1:54name it playing, and switch the playing 1:56property to yes.1:59Now, keep in mind videos can only 2:01autoplay in browsers if they're [music]2:03muted. So, make sure the muted property 2:05is set to yes, or else this may not work 2:08consistently across browsers. [music]2:10With our variants all set, we'll head 2:12back to the canvas to set up the scroll 2:14interaction that will switch between 2:15them as the video comes into [music]2:17view. So with the component selected,2:20we'll head to the properties panel and 2:22under effects, we'll add a scroll 2:25variant. [music]2:26From here, we'll set the trigger to 2:28layer in view, which tells Frame to swap 2:31the variance as the component itself 2:34enters the viewport. By default, this 2:36uses the center of the component as the 2:38reference point. So the trigger fires 2:40when the center line crosses the bottom 2:43of the viewport. I'm actually going to 2:45stick with this for our [music] example 2:47because I want at least the top half of 2:49the video visible before it starts 2:50playing. We can always switch to the top 2:53or bottom options if the design needs 2:55the video to play earlier or later in 2:58the scroll. Now, we'll just set our from 3:01variant [music] to paused and our to 3:03variant to playing and framer will know 3:06to switch [music] states right at the 3:08midpoint. And finally, we want to make 3:10sure to set replay to no so that [music]3:12the effect trigger only happens once.3:15Now, let's head to preview and see how 3:17it works. Just a couple of variants and 3:19one scroll trigger, and we have a video 3:22that now plays exactly when we want it 3:24to, whether that's the top, middle, or 3:27bottom of the viewport. [music] It's a 3:29simple setup, but it gives the page a 3:31more intentional and polished feel as 3:33the user scrolls. Thanks for watching 3:36and as always, I'll see you in the next 3:38video.

TeachesScroll Animations Components

Also coversComponent Variants Frames Keyboard Shortcuts Scroll Variants Sizing Stacks

Watch on YouTube ↗

‹ The Framer Awards 2025 - $100K In Prizes - Submit Now

Framer Update: Flow Effect ›

More in this topic

Framer Update: Logo Shaders

Framer Update12K views · 1 month ago

8 Framer shortcuts you're probably sleeping on

8 Framer shortcuts you're probably sleeping on

Layout & Design3K views · 2 months ago

Framer Update: Holo Shader

Framer Update: Holo Shader

Framer Update6K views · 2 months ago

Framer Update: Stack Sorting and Bento Grids

Framer Update: Stack Sorting and Bento Grids

Framer Update7K views · 2 months ago

Shader: Chromatic Aberration

Shader: Chromatic Aberration

Framer Update7K views · 2 months ago

Announcement23K views · 2 months ago

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Sharing Vector Sets Across Projects (Vectors Lesson 7)

Layout & Design1K views · 3 months ago

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)

Layout & Design2K views · 3 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.