nvatland Posted July 28, 2020 Share Posted July 28, 2020 Hello! This might be a stupid question, but I have a timeline animation that is being scrubbed on scroll using ScrollTrigger. I have a video that I want to toggle whether it is playing or not so I was using onEnter and onComplete which is working, however when I scroll back up I want the video to start playing again but I'm not sure how to achieve this. A basic CodePen is below. Thanks! See the Pen VweOaQp by nvatland (@nvatland) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted July 28, 2020 Share Posted July 28, 2020 Nah, not a stupid question at all. There's no such thing around here. You could simply use an onToggle callback on the ScrollTrigger, like: onToggle: self => self.isActive ? playVideo("beach-waves") : pauseVideo("beach-waves"), Is this what you wanted?: See the Pen ea4c19fad6fba27d1abed8f025363a4f?editors=0010 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
nvatland Posted July 28, 2020 Author Share Posted July 28, 2020 12 hours ago, GreenSock said: Nah, not a stupid question at all. There's no such thing around here. You could simply use an onToggle callback on the ScrollTrigger, like: onToggle: self => self.isActive ? playVideo("beach-waves") : pauseVideo("beach-waves"), Is this what you wanted?: Thanks for this! I probably oversimplified my codepen demo–in my actual timeline I have multiple videos in multiple nested timelines that will need to be played/paused depending on the timeline/scroll position which is why I was attempting to use it in the .to() property. Should I set up individual ScrollTriggers for these videos? I can also expand my CodePen to better reflect the multiple nested timelines/multiple videos. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 28, 2020 Share Posted July 28, 2020 It sounds like your issue is logical Unfortunately we don't have the capacity to answer every question posted here that doesn't specifically relate to GSAP. Do you have a question related to GSAP? If so we're happy to answer. If not, you're still welcome to post a demo that better reflects your situation. But you may or may not receive help regarding it. Link to comment Share on other sites More sharing options...
nvatland Posted July 29, 2020 Author Share Posted July 29, 2020 7 hours ago, ZachSaucier said: It sounds like your issue is logical Unfortunately we don't have the capacity to answer every question posted here that doesn't specifically relate to GSAP. Do you have a question related to GSAP? If so we're happy to answer. If not, you're still welcome to post a demo that better reflects your situation. But you may or may not receive help regarding it. Totally understandable! I think the root of my question as it relates to GSAP is how to call a function on a specific animation using ScrollTrigger when scrolling in reverse (like onStart or onComplete). Link to comment Share on other sites More sharing options...
GreenSock Posted July 29, 2020 Share Posted July 29, 2020 1 hour ago, nvatland said: Totally understandable! I think the root of my question as it relates to GSAP is how to call a function on a specific animation using ScrollTrigger when scrolling in reverse (like onStart or onComplete). Perhaps I'm misunderstanding, but isn't that exactly what the onEnter, onLeave, onEnterBack, and onLeaveBack callbacks are for? 1 Link to comment Share on other sites More sharing options...
nvatland Posted July 30, 2020 Author Share Posted July 30, 2020 22 hours ago, GreenSock said: Perhaps I'm misunderstanding, but isn't that exactly what the onEnter, onLeave, onEnterBack, and onLeaveBack callbacks are for? onEnter, onLeave, onEnterBack, and onLeaveBack are referring to the ScrollTrigger itself, not an individual animation inside of the ScrollTrigger timeline right? Or am I misunderstanding it? Here's an updated codepen where I added a "second phase." Hopefully this helps! When scrolling back up, as the individual .to() animations are triggered, I'm trying to get them to run a function. See the Pen VweJbGK by nvatland (@nvatland) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted July 30, 2020 Share Posted July 30, 2020 Right, those callbacks are for the ScrollTrigger. If you're trying to do something like that multiple times inside the timeline, I'd do something like this: See the Pen ea371af4acee25a6a1b092b8fd59a5b0?editors=0010 by GreenSock (@GreenSock) on CodePen Notice that I created a toggleVideo() function that fires at certain spots and checks the direction of the ScrollTrigger to determine if it should play() or pause(). That makes it much simpler for you to just drop call()s into the timeline and indicate if it's for starting or stopping the video. 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