Jump to content
Search Community

Completing all currently running animations

karljohan108 test
Moderator Tag

Recommended Posts

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?

Link to comment
Share on other sites

On 9/5/2022 at 6:00 PM, Carl said:

it may be as simple as calling  gsap.globalTimeline.progress(1)

https://greensock.com/docs/v3/GSAP/gsap.globalTimeline

 

 

if that doesn't work or causes issues with gameplay try exportRoot()

var tl = gsap.exportRoot();
tl.progress(1)

 

https://greensock.com/docs/v3/GSAP/gsap.exportRoot()

 

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?

Link to comment
Share on other sites

9 minutes ago, karljohan108 said:

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?

If you'd like some help, please provide a minimal demo (like a CodePen) and we'd be happy to take a peek. 

  • Like 2
Link to comment
Share on other sites

just for kicks I made a quick test showing a timeline, its child tween, and an independent tween all completing when the globalTimeline gets progress(1).

 

See the Pen ExLjzzp?editors=1111 by snorkltv (@snorkltv) on CodePen

 

click the button within 20 seconds or re-run the demo.

 

logs shown in console

 

"child complete"
"timeline complete"
"independent complete"

 

you can use this as a starter file or create your own codepen or codesandbox minimal demo. the simpler the better.

 

 

 

 

  • Like 3
Link to comment
Share on other sites

14 hours ago, Carl said:

just for kicks I made a quick test showing a timeline, its child tween, and an independent tween all completing when the globalTimeline gets progress(1).

 

 

 

 

click the button within 20 seconds or re-run the demo.

 

logs shown in console

 

"child complete"
"timeline complete"
"independent complete"

 

you can use this as a starter file or create your own codepen or codesandbox minimal demo. the simpler the better.

 

 

 

 

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:

 

See the Pen MWGaEZm by holgersindbaek (@holgersindbaek) on CodePen

 

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

  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

This is a super rare edge case caused by the fact that you had a yoyo animation and when you force the playhead of the parent timeline to completion before the yoyo'd child even begins, that means that the child's playhead goes from 0 to...0! It doesn't move and it appears to be back at the start which seems like it's not completing (even though it technically is). I had to add some code to sense that case in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

Here's a fork of your demo with no changes other than the beta file: 

See the Pen abGJEaL?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up?

Link to comment
Share on other sites

6 hours ago, GreenSock said:

This is a super rare edge case caused by the fact that you had a yoyo animation and when you force the playhead of the parent timeline to completion before the yoyo'd child even begins, that means that the child's playhead goes from 0 to...0! It doesn't move and it appears to be back at the start which seems like it's not completing (even though it technically is). I had to add some code to sense that case in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

Here's a fork of your demo with no changes other than the beta file: 

 

 

 

Does that clear things up?

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

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