onPause event

[fitzmode]

How can I get something similar to an onPause event?

 

• I have TimelineMax instances nested on a main TimelineMax. 
• The nested instances each play a video `onStart` event.
• Each video has its own TimelineMax instance nested in the main timeline.
• I would like a way to detect an `onPause` for each instance to pause the video and keep it in sync with the main timeline.

 

However it seems I can't check `isActive()` inside of  main timeline's `onUpdate` to pause each video accordingly because main timeline `onUpdate` is not called again after main timeline is paused. 

I've created an example that represents my use case on Codesandbox.

 

https://codesandbox.io/s/stoic-wozniak-7u7ev?file=/src/App.js

 

** As an aside, any chance we can get Codesandbox embeds on the forums?

 

Edited September 23, 2020 by fitzmode
Clarity

[elegantseagulls]

Hi @fitzmode,

 

I can't seem to get your example to work/quite figure out what you're asking.

Also, it'd be good practice (and easier for us to read/debug) to make sure you're using the GSAP3 gsap.timeline() syntax instead of the old TimelineMax

[ZachSaucier]

In general pausing requires an action like .pause(). At that point you should also pause the video. Maybe make your own custom function that pauses the video and the timeline and use that instead.

[fitzmode]

4 hours ago, elegantseagulls said:

Hi @fitzmode,

 

I can't seem to get your example to work/quite figure out what you're asking.

Also, it'd be good practice (and easier for us to read/debug) to make sure you're using the GSAP3 gsap.timeline() syntax instead of the old TimelineMax

I've updated the example to use gsap.timeline()syntax.

The goal is to

1. Pause the video on pause of the main timeline.
2. Resume the video on main timeline resume.

The problem is:

1. There are no onPause or onResume events available.
2. Checking if the current nested timeline is isActive() cannot be done onUpdate event callback, since callback stops being called once the main timeline is paused. i.e it is never called.

I'm looking for strategies to do this, ideally via gsap. The example represents a more complex setup, so would like to avoid looping over video element dom nodes and pausing them all manually to pause and resume videos. 

 

 

[Visual-Q]

57 minutes ago, fitzmode said:

• There are no onPause or onResume events available.
• Checking if the current nested timeline is isActive() cannot be done onUpdate event callback, since callback stops being called once the main timeline is paused. i.e it is never called.

 

I'm not exactly understanding what's supposed to be happening however I'll take a stab in the dark:

I believe you can use !isActive() / isActive() to test for pause and resume and I'm not sure why you need to check onUpdate.

Presumably your play pause buttons are supposed to initiate these events so you could attach a function to the button actions to check if a timeline is paused or running and do what is necessary at that point.

[Cyango]

Trying to achieve something similar. Basically use gsap as a video player (that allows to animate other elements concurrently for example). Was there any solution?

[GreenSock]

Hi @Cyango. Perhaps this answer will help: