One time video animations

I want to play a custom animation (like a rendered video) as soon as the page loads, or as soon as it is scrolled into view. Take for example Apple’s website right at the top. The animation plays once, then stops. Is there any way to do this in webflow?

Do you talk about this idea? (background video change on scroll):

In the past, apple use this idea/trick a lot. iPhone XS site is more classic scroll animations.

-or- you talk about this trick/idea?

Its hard to understand what you want.

HTML5 video

  1. Add video. Get the video url (source path)
  2. Use custom code embed
<video width="320" height="240" autoplay muted>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
  1. That’s it (Why embed - you want clean animation without any controls / logos of youtube/viemo and so on).

Hide controls and play once:

autoplay (combine with muted if google chrome block the autoplay)

1 Like