How do I replace a timeline with a function call?

[Inactive]

Here's the situation. I have a timeline, with a specific set of animations. I need to make a function that will clear the current timeline and replace it with a set of different animations (and be able to go back to the previous when needed).

 

Here's the catch: The current timeline (whichever one it is at) has to fully complete before it can change.

 

The animation is repeating. My idea was to use the "onRepeat" callback, and run a check for a variable. If the variable and the current animation don't match up, it clears the board and adds the second set of tweens. If they do match up, there is no change.

 

In the codepen, I've set up this system. There are two buttons. If button A is pressed, there is no change. If button B is pressed, animation A will complete first (very important), then animation B *should* start looping in its place. Same for vice versa: if animation B is active, when the button for A is pressed the animation will complete then switch.

 

Problem is, it never starts looping again. It transitions nicely, like it should, but then it only runs once. Thus, the "onRepeat" function can't be called, and the variable can't be checked, and the animation stops.

 

Is there a fix for the re-added animations not repeating, or am I going about this entirely wrong? I tried re-adding the repeat:-1 property, but it didn't work. It doesn't seem paused either.

 

That's basically it, but if you want to read more about my actual project:

 

The codepen demo is pretty similar to my real project, but it's not exact. I'll describe it, in case there are any things that can be replicated there but not here.

 

I have a bird that flies back and forth on the screen. With ScrollMagic, when a point is reached, the animation changes to an idle "perching" animation. However, if it instantly changes, the bird cuts off, so I have it smoothly transition by having the timeline endings and beginnings match up. To match them, however, it needs a function to make sure the first timeline ends before changing.

 

I need to have it go both ways to scroll, so there are two functions: one for scroll up to the first animation, one for scroll down to the second animation. In the codepen, these are replaced by the two buttons. The if statements in the codepen are checking whether

 

Thanks for any help! Let me know if something doesn't make sense, missing something obvious, better way of doing things, etc. And sorry for the wall of text.

See the Pen mPZXJR by Blue_Dragon360 (@Blue_Dragon360) on CodePen

[Dipscom]

Hello Blue_Dragon360,

 

Welcome to the forums! If I understood your problem correctly, I think you are over-thinking it.

 

This is what I see you are trying to achieve:

 

----

 

Play timeline.

 

Check: Should it repeat?

 

Yes - Play timeline.

 

No - Play another timeline.

 

-----

 

I've forked your Pen - Thank you for that, it helps us to help you a lot - and made some changes. Is this what you were after?

 

See the Pen eZwrOG?editors=0010 by dipscom (@dipscom) on CodePen

 

I have also tidied up your JS code a bit. Compare it with what you had written and you will see there is a lot that you can change to make it more concise and easier to read. There's more that can be done but I feel it might get confusing if we go full on chaining methods and stuff. Fear not, you'll get there.

[Inactive]

See the Pen eZwrOG?editors=0010 by dipscom (@dipscom) on CodePen

 

I have also tidied up your JS code a bit. Compare it with what you had written and you will see there is a lot that you can change to make it more concise and easier to read. There's more that can be done but I feel it might get confusing if we go full on chaining methods and stuff. Fear not, you'll get there.

Oh, wow: That is a lot better. Completely neglected to consider playing a different timeline! I'll transfer the idea over to my project and let you know if it works.

 

As far as JS cleaning goes, could you give an example of where method chaining would make things better in your example? Do you mean grouping the .to's? (I didn't know about the .to method for timelines -- I'll start using that!) I'm a beginner to GSAP, and my Javascript as a whole is a bit rusty.

 

Thanks for the help!