Guide
- Video
- Scroll
Guide
- Video
- Scroll
Guide
- Video
- Scroll
How to Play Video on Scroll on Framer Websites
Ever scroll through a website and notice a video that plays as you scroll? It feels interactive, dynamic, and just straight-up cool. Good news: you can build that same scroll-triggered video effect right inside Framer, no code needed. Let me show you how to do it.
Posted by
Nandi
Table of contents
What is the Scroll Media Component?
The Scroll Media Component is a plug-and-play element you can drag straight into your Framer project. It lets you play a video or an image sequence based on scroll position, perfect for product demos, interactive storytelling, or just making your site feel next-level.
What is the Scroll Media Component?
The Scroll Media Component is a plug-and-play element you can drag straight into your Framer project. It lets you play a video or an image sequence based on scroll position, perfect for product demos, interactive storytelling, or just making your site feel next-level.
What is the Scroll Media Component?
The Scroll Media Component is a plug-and-play element you can drag straight into your Framer project. It lets you play a video or an image sequence based on scroll position, perfect for product demos, interactive storytelling, or just making your site feel next-level.
Scroll animation.
Scroll animation.
Scroll animation.
Drop it onto the canvas
Once you drag the component into your canvas, you’ll see a placeholder asking you to upload a video or images. This component has two modes, Video and Image Sequence. Choose your media type in the right-hand properties panel.
Drop it onto the canvas
Once you drag the component into your canvas, you’ll see a placeholder asking you to upload a video or images. This component has two modes, Video and Image Sequence. Choose your media type in the right-hand properties panel.
Drop it onto the canvas
Once you drag the component into your canvas, you’ll see a placeholder asking you to upload a video or images. This component has two modes, Video and Image Sequence. Choose your media type in the right-hand properties panel.
The placeholder state of the component.
The placeholder state of the component.
The placeholder state of the component.
Upload your video
After selecting Video mode, go ahead and upload your video file. This will replace the placeholder and link your scroll directly to video playback. Want the video to cover the entire section? Adjust the Media Fit setting to cover or contain depending on your design.
Set scroll behavior with “length”
The Length setting controls how far someone needs to scroll to play the full video. Think of it like mapping scroll distance to playback time.
Shorter length = quicker playback
Longer length = slower, more drawn-out effect
You can fine-tune this depending on how dramatic you want the scroll animation to feel.
Customize the details
You’ll also find settings like:
Start: When the scroll effect should begin.
Offset: Adds extra scroll padding for fine-tuning timing.
Media Fit: Choose how the media scales inside the frame.
Tweak these until the scroll effect feels just right.
Upload your video
After selecting Video mode, go ahead and upload your video file. This will replace the placeholder and link your scroll directly to video playback. Want the video to cover the entire section? Adjust the Media Fit setting to cover or contain depending on your design.
Set scroll behavior with “length”
The Length setting controls how far someone needs to scroll to play the full video. Think of it like mapping scroll distance to playback time.
Shorter length = quicker playback
Longer length = slower, more drawn-out effect
You can fine-tune this depending on how dramatic you want the scroll animation to feel.
Customize the details
You’ll also find settings like:
Start: When the scroll effect should begin.
Offset: Adds extra scroll padding for fine-tuning timing.
Media Fit: Choose how the media scales inside the frame.
Tweak these until the scroll effect feels just right.
Upload your video
After selecting Video mode, go ahead and upload your video file. This will replace the placeholder and link your scroll directly to video playback. Want the video to cover the entire section? Adjust the Media Fit setting to cover or contain depending on your design.
Set scroll behavior with “length”
The Length setting controls how far someone needs to scroll to play the full video. Think of it like mapping scroll distance to playback time.
Shorter length = quicker playback
Longer length = slower, more drawn-out effect
You can fine-tune this depending on how dramatic you want the scroll animation to feel.
Customize the details
You’ll also find settings like:
Start: When the scroll effect should begin.
Offset: Adds extra scroll padding for fine-tuning timing.
Media Fit: Choose how the media scales inside the frame.
Tweak these until the scroll effect feels just right.
The scroll media component properties in Framer.
The scroll media component properties in Framer.
The scroll media component properties in Framer.
Wrapping up
Just drop it in, upload your media, and set the scroll length. You’ll have a smooth, cinematic experience up and running in minutes. It’s one of those features that looks hard, but isn’t. And it makes a huge difference in how polished your site feels.
Want to go deeper into scroll-based animations? I’ve got an in-depth tutorial on scroll animations you can check out.
Wrapping up
Just drop it in, upload your media, and set the scroll length. You’ll have a smooth, cinematic experience up and running in minutes. It’s one of those features that looks hard, but isn’t. And it makes a huge difference in how polished your site feels.
Want to go deeper into scroll-based animations? I’ve got an in-depth tutorial on scroll animations you can check out.
Wrapping up
Just drop it in, upload your media, and set the scroll length. You’ll have a smooth, cinematic experience up and running in minutes. It’s one of those features that looks hard, but isn’t. And it makes a huge difference in how polished your site feels.
Want to go deeper into scroll-based animations? I’ve got an in-depth tutorial on scroll animations you can check out.
