Horizontal Timeline Scroll Video

[Sukru]

Hello, I want to play and pause video with horizontal scrolltrigger. I did the playback but couldn't find a solution to stop it. Can you help me?

See the Pen XWYeqwM by sukruemanet (@sukruemanet) on CodePen.

[mvaneijgen]

I've moved your onEnter and onLeave callbacks to the ScrollTrigger it self and that works.

 

See the Pen JjZrBwY?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Sukru]

@mvaneijgen Thank you There is something like this, when scrolling back between the end marker and the start marker, you need to go back and hover over the start marker in order for the video to play. So I think the video should work while scrolling back and forth between the start and the end marker.

[mvaneijgen]

Yes of course! That is where ScrollTriggers toggleActions come in! See the docs for more info

 

 

String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset"will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

With this you can define what happens when you enter the trigger, leave or enter back from the end, ect. If reading is not your thing, check out the video on the docs at 2:50 toggleActions get explained in detail

 

 

[Sukru]

@mvaneijgen I applied the codes to the place you mentioned, but it still didn't work. Can you write the correct codes on codepen?

 

See the Pen XWYeqwM by sukruemanet (@sukruemanet) on CodePen.

[mvaneijgen]

Ah, my bad! This will not work with toggleActions, because nothing is animating. Here is the correct code. I've just also add the onEnterBack and onLeaveBack and with this toggle de video on and off

 

See the Pen PoaJXRy?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen.

[Sukru]

@mvaneijgen no problem, thank you very much