Jump to content
Search Community

Dynamic Timeline building - Handling state change between added tweens

JensK test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Forum,

I need your help to tackle a problem. I want to build a timeline which depends on the state of my app. The thing is, that the timeline also changes the state of the app.


The linked codepen shows my problem. This is a very simplified version of it. It happens a lot more, but I think if I can solve this I can resolve the rest, too.


I already identified the Problem:

timeline.addCallback(score, null, [symbol]);

is called when the timline reaches the point, where this callback is inserted, but


is created at the begin of the timeline (where all scores are 0)


I hope someone knows a better approach, as I am sure, this might not be the right way to do that.


If I add scoreTween as a callback i have the problem, that it tweens, but since callbacks have a zero duration all following timelines are inserted at the exact same place.

I understand why all this is happening, but I can't find a workaround, that works.


Hope you can help me out,


See the Pen MobNgm by nahilep (@nahilep) on CodePen

Link to comment
Share on other sites

Hello @JensK and Welcome to the GreenSock Forum!


Can you please give us some additional info on what is the desired behavior and the order of what you want to animate. It will help us understand your issue more.


So this way we have a better idea what it is supposed to visually happen when the "score" button is clicked,  versus what you see happening now.


Thank you :)

Link to comment
Share on other sites

Whooops, so I left out the most important part, sorry for that.


I have a queue of symbols which I loop over. (symbols in the click-callback)


Each symbol "scores" by calling the score function which increases the property of the same name in the _scores object.

Then I build a timeline, which shows the scoring. In this simple copdepen, it scales one of the div's shortly for basic scoring. Next there are multiple things being checked in my app, this I simplified to just a check if the score is greater than 2 in the codepen. If the score is greater than 2 it should rotate the div in question, which doesnt happen, because the tweens of the timeline in scoreTween() are build at a point in time, when the callbacks to score() haven't happend yet and thus the score is still 0.


What's really happening is a lot more. jquery Objects are created, classes changed to active and a lot more, also the conditions are a lot more diverse in my app. But if I can solve this problem of the codepen, I think I am good.


Sorry for not explaining my problem well.




P.S.: I forked the codepen and changed it to the other approach I was mentioning briefly: 

See the Pen KqaKjg by nahilep (@nahilep) on CodePen

This plays all animations at once, since the callbacks have all zero duration and so are inserted all at the beginning of the timeline.

Link to comment
Share on other sites

Hey all,

I was sure that I had no TweenMax problem. The way I was trying to build my timeline was flawed. I found a better approach. First I loop over the array score and create score-objects which I can use then to build the timeline.


See the Pen WORjgg by nahilep (@nahilep) on CodePen


Hope it helps someone some day,


  • Like 1
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...