Start video playback at a certain point in the page swipe

[nathalie]

I’ve created a paging group where each page has a video that I’d like to start playing when you reach that point in the paging sequence. Similar to what Matt describes here, but using a video instead of a component with its own internal animations:

Start a component animation from parent page swipe

I am LOVING Principle. I have one question about component animations and page swiping. I’m working on some mobile app on-boarding education. Each page has a little animation that I’d like to start when that page swipes in. In the below example I have to swipe over really fast to catch the animation because it starts as soon as the prototype loads. [onboarding%20animation] Is there a way to delay starting the animation on a particular page until it swipes in?

It looks like all of the videos in the group start playing when the artboard is loaded. How can I start playing a video only when it becomes visible in the paging sequence?

Tried the “media time” property with a driver, but that seems to tie the timing to the paging movement itself rather than when a page is reached. Working on a prototype in the next day and would love any advice!

Thanks!

[Daniel]

you could use a hover event in a portion of the scroll area to trigger a component containing a video to switch to an artboard where the video is playing.

[nathalie]

Daniel, thanks so much! Actually we had used that trick on desktop for a bit, but now I’m trying to replicate the same behavior on mobile.