Manipulating Animation w/User Interaction

[Nitro Interactive]

Hi,

 

I began using GSAP a few days ago.  It's great and I am learning new things by the minute.  Having a lot of fun.

 

I'm stuck on something and I am probably overthinking it and making it far more difficult than it needs to be.

 

I have three timelines, and it can probably be consolidated down to one -- not sure yet.  I want the animation to play through, which it does now, but I want to be able to jump to each arm/selector of the animation as the user clicks on them.  If you wait for the initial timeline to loop through, you can then fire off the animation by clicking on each label for the respective selection/arm.  I understand that I can stop the initial timeline from playing and jump to my next selection/arm, but I want to be able to allow the first animation to finish a cycle (one cycle is the arm filling in and retracting) before jumping to the next.

 

Here is a demo: 

 

I was hoping I could just pass the user's selection through and skip to that selection, but I can see that when I create my loop, the entire timeline is queued up and begins to play from start to finish .

 

I created three timelines because I was going to have one always playing through the selections.  One for the user's selection "In" that stops at a specific point and the third to play that selection "Out" when the user makes a new selection or the animation continues on it's own.  Again, having the animation continuing on after a selection is made is not all that important; I am pretty sure I could use a callback onComplete after the user makes their selection to achieve this piece.

 

I have experimented with tweenFromTo() and related functions along with labels to try and jump through the animation.  I have also added if statements for isActive() so I can stop a currently playing timeline and start a new one, or potentially the same one, if I can jump to the correct position.  I have left this code intact at the bottom.

 

Edit: I think my problem here is that I am looping through and creating the timeline in one shot -- so that I can pass my IDs through.  I cannot stop the loop from iterating through all six passes because it's already queued up.  I believe as much as I do not want to do it that I should create tweens for each arm/selection"; I could then just label them 1-6.  I could then scrub through the animations by passing my ID through to the function I wrap my timeline in.  I was trying to consolidate my code but I think it ended up making it far more complex in this case.  No?

See the Pen QWybmRj by steve-giorgi (@steve-giorgi) on CodePen

[mikel]

Hey @Nitro Interactive,

 

Maybe this could be a solution

 

See the Pen pogJKNZ by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Nitro Interactive]

Hi Mikel,

 

Thank you very much for taking the time to build a demo.  This is a completely different take than what I had thought of and definitely gives me more to learn from.  You're adding an event listener to each tween and I think that will work.  I can attach these tweens to a timeline and have it looping when the user isn't interacting with it?  It doesn't have to start back up but I wanted to have it looping through until the user interacts with it for the first time.

[mikel]

Hey @Nitro Interactive,

 

If I got it right, it could go like this - see pen above.