hoper Posted June 23, 2021 Share Posted June 23, 2021 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 More sharing options...
Cassie Posted June 23, 2021 Share Posted June 23, 2021 Hi there, I think you meant to send a different pen. Did you save your version? Link to comment Share on other sites More sharing options...
hoper Posted June 23, 2021 Author Share Posted June 23, 2021 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: 1 Link to comment Share on other sites More sharing options...
OSUblake Posted June 23, 2021 Share Posted June 23, 2021 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 comment Share on other sites More sharing options...
OSUblake Posted June 23, 2021 Share Posted June 23, 2021 If you want to reset something, it's better to use your own timeline. See the Pen BaWgxbd by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
hoper Posted June 23, 2021 Author Share Posted June 23, 2021 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. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted June 23, 2021 Share Posted June 23, 2021 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); 1 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now