Scroll Scrub Video

About

Play a video on scrub. The video starts playing when it comes into your viewport and stops playing based on a value you set as a properety. This allows you to set the pace and how long you want to play the video. You can upload the video or set a video URL. For optimal results, its recommended that you upload the video to a third party service and use the link

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click here to see the full library

Instructions

1. Add Component: Copy and paste the Scroll Video component code into your Framer project file

2. Position Component: Place the component on your canvas and set it to sticky positioning for the scrolling effect to work properly - this is essential for the video to stay in view while scrolling. Also set the width and height to fill and 100vh

3. Configure Video Source: Choose between URL or File upload, then add your video URL or upload an MP4/MOV/WebM file

4. Customize Scroll Behavior: Set Scroll Length to determine how much scrolling controls the video duration, choose Video Alignment for viewport positioning, select Video Fit for aspect ratio behavior, and configure Start On to control when the scroll interaction begins (top/center/bottom of viewport)

How It Works

You can customize this scroll-controlled video component through six simple settings. Choose between uploading a video file or using a web URL, then set how much scrolling distance it takes for the video to play from start to finish (from quick 100-pixel scrolls to long 20,000-pixel journeys). Position the video at the top, center, or bottom of the screen, and decide when it starts playing - either immediately when it appears, when it's halfway visible, or only when fully on screen.

Support

For any queries and help setting up the component, contact hello@segmentui.com