Jump to content
GreenSock

fitzmode

onPause event

Recommended Posts

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 by fitzmode
Clarity
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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. 

 

 

Link to comment
Share on other sites

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.

  • 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.
×