Jump to content
Search Community

tl.recent() chainable?

bartcc test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

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

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

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

  • Solution

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

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

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