Jump to content
Search Community

Dynamically adding to Timeline

ajhalls 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

I am playing around with adding things to the timeline and having a couple interesting issues. The easiest way to see is on the codepen link.

 

I created an array, then using buttons add all the info for animating an object to the array, then using the array I loop through and add things to the timeline. The trouble is a few small things.

 

Seems any particular animation can only be added once (click to add rotationX, then Y, then X again and you won't see any effect though more time is added to the timeline.

 

I haven't dived into this much but there seems to be an autodelay when adding those animations.

 

When looping though and adding things using tl.to()... that is great, but how do I remove all tweens so if I update my array it can re add everything that is left? I tried using tl.clear(); but noticed in the docs that it clears more than just the tweens. I also tried clearing it by specifying:

tl = "";
tl = new TimelineLite({onUpdate:updateSlider, delay:0.4});

but that didn't seem to be right either. On my project, if I pause the animation, then start it again, it has trouble, but I had the play button tied in with the loop that adds things to the timeline.

 

I realize these are very basic tweens, but the cool thing is that ideally you could put any animations you want in the array where it is easy to manage (since it is less cluttered than the full "tl" object) and then loop through adding to your animation.

 

So to wrap up, if I could figure out why it is only playing each animation once, how to clear tweens, and maybe why it has a big delay between animations, that would be great. I did try reading up in the docs, but though the functions remove() and clear() are documented somewhat - having an example usage would be awesome since I am not exactly sure what labels mean in the context of

.clear( labels:Boolean ) : *

UPDATE: I cleaned up a few of the old things on the codepen and things are working I think, at least on this. Now to fix it in my app :)

See the Pen JdWzML by ajhalls (@ajhalls) on CodePen

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