GSAP Timeline structure

[Jaak]

Hey everybody,

Could anyone explain me how the setup of a structure like gsap.timeline() works that returns promise when calling .then() on it or await on it, otherwise it returns itself? I've went through the discussion here https://github.com/greensock/GSAP/issues/322 but don't quite get it.

All the best,
Jaak

[OSUblake]

Welcome to the forums @Jaak

 

I'm not quite sure I understand your question. A Timeline/Tween will always return itself. Just log it out to see. If you want to do async code, it will wait on it to finish because JavaScript thinks it's a promiseable object because it has a then method, but it will still resolve with the animation.

 

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

 

 

 

 

 

[Jaak]

Thanks @OSUblake, nice to be here!

Ok, yes I understand that part of it but for instance if I create a class with the then method which returns a promise, it doesn't resolve. When calling await on timeline.then() it resolves because the promise is returned. From the github issue thread I see that being the case as well but how to get from that not actually calling the then method and being able to await directly on the timeline itself is what I am trying to understand.

See the Pen ExoREpM?editors=0010 by jaakal (@jaakal) on CodePen

 

[OSUblake]

I'm not exactly sure why your example doesn't work, but you can see in the source code that it's doing the same thing. When the animation ends, it will call the self._prom.

 

https://github.com/greensock/GSAP/blob/e7fc9b782bc1d27db52807ac095c6727211cd95e/src/gsap-core.js#L1404

 

Is there any reason in particular you are trying to understand how it works, like is something not working for you, or are you just curious?

 

[Jaak]

As GSAP goes, all is good, I am using it daily because of the work and I want to create hasTransitionedIn object for the components, which would behave the same way as the GSAP tween/timeline. At the moment it's setup the way in the code block but I would like to loose the need for calling the promise on that object in order for it to return the promise. Obviously could use the GSAP tween itself but still that does not answer the question, why it works the way it does. So yes, more so curiosity.
 

const hasTransitionedIn = (() => {
  let resolve;

  const promise = new Promise((_resolve) => {
    resolve = _resolve;
  });

  return { promise, resolve };
})();

 

[OSUblake]

Yeah, I'm totally lost too as to why your demo is not working as expected. I even copied most of the code from the GSAP's source and it still wouldn't resolve, so I must be missing something. 🤷‍♂️

[Jaak]

@OSUblake I was kinda thinking that the then method should already have the resolve and reject method passed as parameters and that actually was what was missing. Seems JS is passing those in itself as parameters. Now when setting that resolve to class instance variable I can call it later if I need it to be resolved. Thanks for the help!

See the Pen ExoREpM?editors=0010 by jaakal (@jaakal) on CodePen