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
Add Component: Copy and paste the Scroll Video component code into your Framer project file
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
Configure Video Source: Choose between URL or File upload, then add your video URL or upload an MP4/MOV/WebM file
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)
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.
For any queries and help setting up the component, contact hello@segmentui.com
Nabeel
