Sukru Posted November 17, 2022 Share Posted November 17, 2022 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 More sharing options...
mvaneijgen Posted November 17, 2022 Share Posted November 17, 2022 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 Link to comment Share on other sites More sharing options...
Sukru Posted November 17, 2022 Author Share Posted November 17, 2022 @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 More sharing options...
mvaneijgen Posted November 17, 2022 Share Posted November 17, 2022 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 More sharing options...
Sukru Posted November 17, 2022 Author Share Posted November 17, 2022 @mvaneijgen I applied the codes to the place you mentioned, but it still didn't work. Can you write the correct codes on codepen? Link to comment Share on other sites More sharing options...
Solution mvaneijgen Posted November 17, 2022 Solution Share Posted November 17, 2022 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 2 Link to comment Share on other sites More sharing options...
Sukru Posted November 17, 2022 Author Share Posted November 17, 2022 @mvaneijgen no problem, thank you very much 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now