Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
hoper

How to reset GlobalTimeline

Recommended Posts

Hi,

 

I'm trying GSAP for my new project and it's really cool! However, I don't understand how globalTimeline works. See this example: 

 

In the example, I expect "duration()" to be still same and "progress()" to start from zero when the setTimeout method executes the "add()" method again. But somehow, the the duration is longer (and it's interesting it's not twice long) and progress doesn't start at 0 but somewhere around 0.6. Run the CodePen, see the console output and wait until setTimeout finishes - you'll see it.

 

Thanks

See the Pen mdWZxLg by hoper1 (@hoper1) on CodePen

Link to post
Share on other sites

Hi there,

I think you meant to send a different pen. Did you save your version?

Link to post
Share on other sites
12 minutes ago, Cassie said:

Hi there,

I think you meant to send a different pen. Did you save your version?

 

Sorry! I updated the topic. This one is the right one: 

See the Pen mdWZxLg by hoper1 (@hoper1) on CodePen

  • Like 1
Link to post
Share on other sites

Hi hoper!

 

You generally shouldn't mess with the global timeline. Is there something in particular you are trying to achieve or just curious?

 

The global timeline is setup a little different than a normal timeline as it is using smoothChildTiming and autoRemoveChildren.

 

Link to post
Share on other sites

If you want to reset something, it's better to use your own timeline.

 

See the Pen BaWgxbd by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to post
Share on other sites

Thanks. The example I sent was simplified. In fact, I'm trying to use GSAP with React (using react-gsap package). What I wanted to achieve is to have X timelines with their own tweens. I wanted to control all these timelines with the global one. I wanted to listen the update event on the global timeline to create a progress indicator, pause/stop all sub timelines etc..

 

So I was thinking about it like this:

 

Global timeline

-> Timeline 1

-> Timeline 2

-> .....

 

But it seems like I understand it wrong. Shoul I insert my own parent timeline? I tried that with react-gsap, but then all child timelines played sequentially. I need timelines to play parallel. 

  • Like 1
Link to post
Share on other sites
23 minutes ago, hoper said:

Shoul I insert my own parent timeline?

 

Yep.

 

23 minutes ago, hoper said:

I tried that with react-gsap, but then all child timelines played sequentially. I need timelines to play parallel. 

 

Did you use the position paramater?

 

Add them all at once.

const master = gsap.timeline();

master.add([childTimeline1, childTimeline2, childTimeline3], 0);

Or individually.

const master = gsap.timeline();

master
  .add(childTimeline1, 0)
  .add(childTimeline2, 0)
  .add(childTimeline3, 0);

 

 

  • Like 1
  • Thanks 2
Link to post
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.

×