Developers

Search

How to play a video when it comes into view

Playing a video when it comes into view on your Framer page is a straightforward process that can be achieved without any coding.

Steps to set up video auto-play

  1. Add the video component: Drag the video component onto your page. Select it and press ⌥ ⌘ K (Ctrl shift K) to wrap it in a Component. This allows you to create different states for the video.

  2. Create variants:

    • Create two variants in the component.

    • Name the first variant “Paused” and set the video to “Playing: No” in the properties panel.

    • Name the second variant “Playing” and set the video to “Playing: Yes” in the properties panel.

  3. Set up a Scroll Variant effect:

    • Go back to your main page and select the video component.

    • In the properties panel, add a Scroll Variant effect.

    • Set the trigger to “Layer in View” so the effect activates when the video enters the viewport.

    • Configure the effect with “From: Paused” and “To: Playing” to switch states as the video comes into view.

Now, your video will automatically play when it enters the viewport.

Important notes

By following these steps, you can add interactive, auto-playing videos to your Framer projects.

Didn't solve the issue? Get in touch with us via our contact page for more help.

Steps to set up video auto-play

  1. Add the video component: Drag the video component onto your page. Select it and press ⌥ ⌘ K (Ctrl shift K) to wrap it in a Component. This allows you to create different states for the video.

  2. Create variants:

    • Create two variants in the component.

    • Name the first variant “Paused” and set the video to “Playing: No” in the properties panel.

    • Name the second variant “Playing” and set the video to “Playing: Yes” in the properties panel.

  3. Set up a Scroll Variant effect:

    • Go back to your main page and select the video component.

    • In the properties panel, add a Scroll Variant effect.

    • Set the trigger to “Layer in View” so the effect activates when the video enters the viewport.

    • Configure the effect with “From: Paused” and “To: Playing” to switch states as the video comes into view.

Now, your video will automatically play when it enters the viewport.

Important notes

By following these steps, you can add interactive, auto-playing videos to your Framer projects.

Didn't solve the issue? Get in touch with us via our contact page for more help.

FAQ

  • How can I set up a video in Framer to automatically play when it enters the viewport?

    To set up video auto-play in Framer, first add the video component to your page. Select it and press ⌥ ⌘ K (Ctrl Shift K) to wrap it in a Component, which allows you to create different states. Next, create two variants in the component: name the first variant 'Paused' and set the video to 'Playing: No' in the properties panel; name the second variant 'Playing' and set the video to 'Playing: Yes'. Then, on your main page, select the video component and add a Scroll Variant effect in the properties panel. Set the trigger to 'Layer in View' so the effect activates when the video enters the viewport, and configure it with 'From: Paused' and 'To: Playing'. This will make your video automatically play when it comes into view.

  • Why isn't my video auto-playing in the browser when it comes into view?

    Videos will only auto-play in the browser if they are muted. Browsers block auto-play for unmuted videos, so make sure your video is set to mute in the properties panel.

  • Where can I find a practical example or tutorial for setting up video auto-play in Framer?

    For a practical example and tutorial, you can check out the Framer Video Auto-Play Example at https://framer.com/projects/new?duplicate=7N7M1y4YbPsATpstFFc6 or the Topbar Animation on Framer at https://topbar-animation.framer.wiki/.

Updated

Related articles

How to update components

Overflow: Clip

Sharing Components

Unlinking components

Using event variables