How can I make a video appear after a certain scroll distance in Webflow?
TL;DR
- Wrap the video in a Div Block, set its initial opacity to 0.
- Use the Interactions panel to apply a "Page Scroll" or "Scroll Into View" trigger, then animate the Div’s opacity to 1 at the desired scroll point.
To make a video appear after a certain scroll distance in Webflow, you can use scroll-based interactions via the Webflow Interactions panel.
1. Prepare Your Elements
- Drag a Video element or an Embed element (for custom videos) into your page.
- Wrap the video inside a Div Block to control visibility and animation more easily.
- Set the initial state of the Div Block to be hidden or invisible using opacity or display settings.
2. Set Initial Visibility
- Select the video wrapper Div (not the video itself).
- Go to the Interactions panel (lightning bolt icon).
- Choose “While page is scrolling” or use a Scroll into View trigger—depending on the effect you want.
- For basic appearance after scrolling a certain amount, use “While page is scrolling”.
3. Add a Scroll-Based Animation
- In the Interactions panel, add a “Page Scroll” interaction and choose “Scroll” animations.
- Click + Add scroll animation, then create a new timeline.
- Use the Keyframe editor (0% – 100%) to:
- At the scroll percentage where you want the video to appear (e.g., 60%), set opacity = 0, or display = none.
- At the target scroll percentage (e.g., 70%), set opacity = 1 or display = block/flex.
- Optionally, add other effects like scale or move for a fade-in or slide-in effect.
4. Optional: Use "Scroll Into View"
If you want the video to fade in as it becomes visible in the viewport:
- Select the video wrapper Div.
- Open the Interactions panel and set a "Scroll into view" trigger.
- Add a new timed animation with:
- Initial state: opacity = 0, transform (optional).
- On scroll into view: animate to opacity = 100%, and any additional animation.
- Make sure the video is below the fold so it triggers only after scrolling.
Summary
To show a video after scrolling a certain distance in Webflow, apply a Page Scroll animation or a Scroll Into View interaction to the video wrapper Div, and animate its visibility using opacity and timing within the Interactions panel.
