Jump to content
Search Community

Video Play/Pause Toggle

nvatland test
Moderator Tag

Recommended Posts

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

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

  • Like 3
Link to comment
Share on other sites

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

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

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

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? 

  • Like 1
Link to comment
Share on other sites

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

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. 

  • Like 1
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.
×
×
  • Create New...