Video <-> div interactions

Hello,
I’m designing a site that has a video in background and 5 sections.
The video has 5 minutes.
I’d like that when the page loads the video starts playing and shows the content of each section when it reach a certain time. For instance, a section is shown in the first minute, then when the video reach one minute the section 2 is shown, and so on.
My main doubt is how to trigger the video when it reach one minute, two minutes, etc, …
I’ve seen this Scrollwheel -> Video playback controls!, but it’s not exactly what I want.
Can anyone help me on this? Tutorials, anything!
Thanks in advance


Here is my public share link: LINK
(how to access public share link)

This is custom code issue (With API of video player X or html5 video). No way by webflow interaction to control videos (Yet). Also, this is not scrolling wheel effect (But by some timer and events - and section scroll trick like fullPage.js | One Page Scroll sections Site Plugin).

No way to find a tutorial about something so so so specific. Do you have any site reference use this trick/idea?

What about the user? (If the user scroll to next section before one minute?).

There’s one excellent example here: https://kopke1638.com/

My client saw it and asked me to do something like that.

This is “full job/project” front-end designer with story-board and a lot of work (aaawards site style). With a budget you can do everything :slight_smile:

In general if you put background video (autoplay) and create webflow delay animation it could ± work (But in your reference thier is a lot more).

on time (by delay) 2:05 show section X on time 3:05 hide. Maybe try this idea (Sync manually - like subtitles for movie).

Yes, certainly that with money a lot is possible :slight_smile:

I was searching some html5 video players and thinking of using them via embed html, but your idea it’s a nice workaround for a small budget :slight_smile:

I think that the future will be this time of interactions and more immersive experiences.

Probably a video player that could be used with interactions, would be a nice feature for webflow!

Thanks