karljohan108

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.