Jump to content
Search Community

How to reset GlobalTimeline

hoper test
Moderator Tag

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 comment
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 comment
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 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...