How to play a video when it comes into view

Follow these simple steps to set it up, and you'll have your video playing automatically as it enters the viewport.

• First, drag the video component onto your page. Once you have placed the video component, select it and press ⌘ + K to wrap it in a Component. This step will allow you to create different states for your video.

• Next, create two variants within the component. Name the first variant "Paused" and set the video to "Playing: No" in the properties panel. This ensures the video starts in a paused state. Then, create a second variant called "Playing" and set the video to "Playing: Yes" in the properties panel, so the video will play when this variant is active.

• After setting up the variants, return to your main page. In the properties panel on the right, add a Scroll Variant effect to your component. Set the trigger to "Layer in View," which specifies that the effect should activate when the component comes into the viewport. Configure the effect with "From: Paused" and "To: Playing" to switch from the paused state to the playing state as the component comes into view.

Now, your video will automatically play when it enters the viewport. For a practical example and a matching tutorial video, you can visit this link: Framer Video Auto-Play Example.

Additionally, you can find a demo and tutorial video here: Topbar Animation on Framer.

Please note that you can only auto-play videos in the browser if they are muted. Browsers will block any video from auto-playing if it is not muted, so ensure your videos are set to mute.

By following these steps, you can enhance the interactivity of your Framer projects with auto-playing videos.

Important to mention that videos will only auto-play in the browser if they are muted. The browser will block any video from auto-playing that is not muted.