karljohan108

It certainly does. I know that it's quite an edge-case. Thanks for looking into it though.

Haha... thanks a lot. I'm happy to hear that. Let me know if you have any suggestions for improvements or any other feedback.

Thanks for the demo. I played around with the demo a bit and I figured out what the issue was. My tween was a fromTo tween with a delay and a yoyo effect. So if `gsap.globalTimeline.progress(1)` is called before the tween is started, then it's at the position it's supposed to be at and therefore `onComplete` is never called: https://codepen.io/holgersindbaek/pen/MWGaEZm If you click the button before the second animation starts, then `onComplete` is never called. The solution to the issue seems to be as simple as calling `to` instead of `fromTo`.

Thanks for the suggestion. It seems to work for my timeline, but from what I can see it doesn't work for my tween. In my app I have both a timeline running and a tween running. I can see that "onComplete" is called on the timeline, but it's not called on the tween. How can I complete both timeline and tween animations?

I'm playing around with FLIP and GSAP 3 by doing an implementation of the 2048 game that I've pushed live a couple of days ago. I'm really impressed by how animations can be made with GSAP these days, but I have a few issues that I hope you clarify. The implementation I've made now blocks user inputs as long that an animation is running. It makes the game pretty fool-proof, but it's not optimal for those people who take 2048 a bit more seriously. I've implemented the game in React and the move animations are done using the FLIP part of GSAP, with the merge animations being a normal tween on a separate component. As I see it, the only way to mimic the original 2048 game is to have all the animations complete when a new move is registered. This might look a bit clunky, but it's the way that the original game does it. Is there a way that I can get all running tweens and timelines across components and fast forward them to their ending positions?

Hi guys I just wanted to say THANK YOU for making such an amazing animation framework. I wrote a Mac version of Solitaire a long way back in Rubymotion (a now forgotten language) and decided to try my hands on a web-version of the game. I fiddled around with different animation libraries, but they where either not reliable enough or had smooth enough animations for what wanted. Until I found GSAP of course :-). It might not sound like there's enough animations in a game like Solitaire to make full use of GSAP, but there sure are enough to make your life miserable if you're using pure CSS animations or any other animation framework. You can check out the implementation here if you want to: https://online-solitaire.com/. Anyway... I just wanted to say thank you and to keep up the good work :-).

That's just what I was looking for. "requestAnimationFrame" seems to work perfectly. Thank you.

Thanks a lot for clearing that up for me. That definitely makes sense. What do you suggest that I do in my case then? From what I gather, I either need to find a way to get a callback when the animation is fully rendered and not just finished? Is there a way to do that? Otherwise, I need to optimize my "updateCardElements" somehow? Is there a way to insert an "available" space in the call stack, so things can be rendered on screen in between?

I'm not sure what you mean that the "stack" is massive? I'm not sure what you're saying here, because it sounds like you’re saying that the browser is painting the last bit of the animation after "onComplete" has been called? Is there a difference between GSAP finishing an animation and the animation actually rendering on the screen?

I've added some console statements, so you can track the tween of the cards turning on the "New game" animation - https://online-solitaire.com/spider - so if you go and click "New game", you should be able to see the same logs as in the codepen example above. I managed to take a screenshot of the lag of the last card: https://imgur.com/BM7Jd7A You can see that the last card hasn't completed it's animation. Then I take a look at the new logs: https://imgur.com/ml8fNlC And I can see that the second last "onUpdate" log has a rotateY of -19.11. If I manually give the last card that rotation, I can see that's where the lag is: https://imgur.com/3iszMCo In other words, the last frame being rendered before "onComplete" is called (even though it doesn't look like that in the logs), is the "rotateY" = -19.11 frame.

Because in my "onComplete" function, I'm setting the new state and some other stuff. If I comment out everything in the "onComplete" function, the animations finishes as it should, with no lag. Which, from what I can gather, means that "onComplete" is called before the animation finishes. Nothing else, besides the animation is happening, so I'm not sure why any updates should be issued? I'm using setTimeout and _.delay on "onComplete", because "onComplete" fires before the animation has finished everywhere. So if I set a 10ms delay, then the animation has time to finish before whatever is in the "onComplete" function executes.

I can't make a reduced test case, but I can show you in the example I have. I'm using GreenSock in a game - https://online-solitaire.herokuapp.com/spider - so if you go to that url and click "New game", then the cards will animate to the board. You'll notice that the last card to the right doesn't turn fully. There's a lag in the turning of that card. That happens because "onComplete" is called before the "TimelineMax" animation is completed. Any idea what it could be about? Am I misunderstanding something regarding how "onComplete" works? Is "onComplete" called when the last frame of the animation renders or is it called at some other point?

I have a TimelineMax called animationTimeline with 3 other TimelineMax's in it. On my animationTimeline I have an onComplete callback set on it. The problem is that the onComplete callback is called before the last animation has ended. So there's a tiny bit left on the last animation and then onComplete is called. In my onComplete, I'm re-rendering some items, so everything looks kind of choppy, because onComplete is called before time. I think it might have something to do with what they're talking about in these 2 posts: https://greensock.com/forums/topic/8337-oncomplete-is-firing-before-the-last-animation-frame/ https://greensock.com/forums/topic/6528-tweeneventcomplete-fires-before-rendering-complete/ Is onComplete generally called before the animation has completely finished (before the last frame of the animation has been rendered)? How can I get a callback for complete render? I'm using the latest version of GreenSock with the latest version of Chrome.