Jump to content


Horizontal Timeline Scroll Video

Go to solution Solved by mvaneijgen,

Recommended Posts

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

Link to comment
Share on other sites

  • Sukru changed the title to Horizontal Timeline Scroll Video

@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.

Link to comment
Share on other sites

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



Link to comment
Share on other sites

  • Solution

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.