bartcc Posted May 4, 2023 Share Posted May 4, 2023 Hi, I wanted to receive a timelines endTime() from tl.recent(). Acc. to the docs tl.recent() is supposed to return Function | Timeline | Tween. However in my case it merely returns a Tween, so no chance for calling endTime() on it. Am I doing sth. wrong here? What I'm trying to achieve is the following: mainTl .add(doSthFn) .add(doSthThatTakesAWhileFn) .add(() => doSthElseTherafterFn(), '>') // how can I position this AFTER doSthThatTakesAWhileFn properly? In my case doSthElseTherafterFn keeps starting at the same time doSthThatTakesAWhileFn starts. Note: in doSthThatTakesAWhileFn many things are added to mainTl, e.g. adding things in a loop a.s.o. (I know this is actually two questions, still - I give it a try Thanks Link to comment Share on other sites More sharing options...
bartcc Posted May 4, 2023 Author Share Posted May 4, 2023 Upps, never mind - in doSthThatTakesAWhileFn things are added to a different timeline not to mainTl. So I think this must be the reason of my timing issue. So whats left is how can I get the endTime of this other timeline? otherTl.recent().endTime() doesn't work since otherTl.recent() returns a Tween. Link to comment Share on other sites More sharing options...
GreenSock Posted May 4, 2023 Share Posted May 4, 2023 3 hours ago, bartcc said: However in my case it merely returns a Tween, so no chance for calling endTime() on it. I'm a bit confused - endTime() applies to any animation (Tween or Timeline). 3 hours ago, bartcc said: mainTl .add(doSthFn) .add(doSthThatTakesAWhileFn) .add(() => doSthElseTherafterFn(), '>') // how can I position this AFTER doSthThatTakesAWhileFn properly? It's very difficult for us to troubleshoot by just looking at this excerpt. I have no idea what each of those things is or what they do. But I'm guessing that doSthThatTakesAWhileFn is a function that itself adds a bunch of things to mainTl? If so, you've got a logic issue in your code because you're essentially asking "how can I know where all the things end...before I've even created any of those things or added them to the timeline?" See what I mean? You're just adding a function call to the timeline (and not even invoked it yet)...and then you're immediately wanting to insert something else into the timeline that's totally dependent on whatever actually happens inside that function that hasn't been invoked yet. If you still need some help, please be sure to post a minimal demo that clearly illustrates the issue (with as little code as possible, not your whole project) and we'd be happy to take a peek and answer GSAP-specific questions. 👍 Link to comment Share on other sites More sharing options...
bartcc Posted May 4, 2023 Author Share Posted May 4, 2023 Hi Jack, thanks for your reply. Setting up a simple See the Pen WNadQep by bartcc (@bartcc) on CodePen I noticed that it makes a huge difference how to add a fn to tl.add(). Using a plain function object instead of an invoked function call inside add() was the cause of the problem. Now the timeline does exactly what I expect - it waits for the previously added sub-timeline to be completed: // Correct gsap.timeline() .add(getTl1()) .add(() => console.log('Waits until previously added timeline has finished')) // Wrong gsap.timeline() .add(getTl1) .add(() => console.log('gets called immediatly')) It wasn't (and still isn't) quite clear to me what gsap internally does with the function I provide. I've assumed that it expects just the pure function object. But obviously in my case I must provide the sub-timeline as result of the invoked function. Thanks for pointing me in that direction! Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted May 4, 2023 Solution Share Posted May 4, 2023 Hi, I'm not completely sure about all the internals that goes into this, but the thing is that GSAP is somehow detecting that getTl1 is a function and even you're just passing a reference to that function: gsap.timeline() .add(getTl1) It gets executed and the timeline created in the function runs, but the GSAP instance is not added to the timeline's playhead, so if you inspect that timeline you'll see that it's duration is zero, that's why the console is called immediately. While if you inspect the timeline where the function is executed: gsap.timeline() .add(getTl1()) You'll see that the duration of that timeline is 5 seconds, the duration of the instance created by the getTl1 method. In this case the console gets called once the animation is completed. As I mentioned I don't know all the ins and outs, but that is the way it's working soto speak. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
bartcc Posted May 5, 2023 Author Share Posted May 5, 2023 Thanks, that helped! Link to comment Share on other sites More sharing options...
GreenSock Posted May 5, 2023 Share Posted May 5, 2023 20 hours ago, bartcc said: It wasn't (and still isn't) quite clear to me what gsap internally does with the function I provide. I've assumed that it expects just the pure function object. But obviously in my case I must provide the sub-timeline as result of the invoked function. You can add function calls into a timeline - GSAP doesn't (and can't) care what you actually do inside that function. These are identical: tl.add(someFunction); tl.call(someFunction); The add() function is smart enough to check the thing you're adding. If it's an animation (Tween/Timeline), it adds that to the timeline of course. If it's a function, it adds a function call at that spot (which takes zero time on the timeline of course - it simply invokes the function when the playhead hits that spot). If it's a string, it adds it as a label. That's what makes add() so powerful/flexible. So again, when you place a function call into a timeline, you could think of that sorta like putting a .set() call there with an onStart so that when the timeline's playhead hits that spot, it just fires off that function (invokes it). There's nothing magical that GSAP is doing internally around any of this. It's simply placing that function call at the spot on the timeline you requested. That's all. Does that clear things up? Link to comment Share on other sites More sharing options...
bartcc Posted May 5, 2023 Author Share Posted May 5, 2023 Hi Jack, thanks a lot for your response. Yes, that does clear things up entirely. Thanks for your time! 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