Jaak Posted April 9, 2022 Share Posted April 9, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted April 10, 2022 Share Posted April 10, 2022 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 Link to comment Share on other sites More sharing options...
Jaak Posted April 10, 2022 Author Share Posted April 10, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted April 11, 2022 Share Posted April 11, 2022 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? Link to comment Share on other sites More sharing options...
Jaak Posted April 11, 2022 Author Share Posted April 11, 2022 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 }; })(); Link to comment Share on other sites More sharing options...
OSUblake Posted April 12, 2022 Share Posted April 12, 2022 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. 🤷♂️ Link to comment Share on other sites More sharing options...
Jaak Posted April 12, 2022 Author Share Posted April 12, 2022 @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 1 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