Seeking to a label with a duration

[AlanAbbo]

Hi,

I am trying to get some help with a particular problem i'm having. I'm relatively new to GSAP and i'm not sure if it's even possible.

 

I've created a codepen example here  For some reason the embed of the codepen doesnt seem to be working here on the forum 😢

 

What I would like to do is create a number of animations using paths / shapes in an SVG. These animations can take place in sequence, or if the user clicks a button, it will jump to a specific part. So far this probably sounds like simple timeline stuff right? But here's where i'm having the issue. Below i'll explain a couple of aspects of the steps in the timeline so it makes more sense hopefully.

 

Initial State - Show a 3 x 3 grid of crosses. They are all shown with other details of the SVG hidden.
Step 2 - A highlight box shows around one of the crosses at position 1 1.
Step 3 - The highlight box moves to position 3 3 and rotates 45 degrees.
Step 4 - The last column of crosses fade away along with the highlight box which also rotates as it fades, leaving just the first two columns of crosses showing.

 

What I am trying to do is tween from one step to another without having to go through all of the animations in between. So for example, if we go from Step 4 to the initial state, I would expect that only the last column of crosses would fade back in, since the highlight box has an opacity of 0 at the end of both labels.

It's almost as though I want to be able to just do a seek() to the relevant label, and pass a duration. Is this even possible? Many thanks

See the Pen VwvENQj by alanablett (@alanablett) on CodePen

[GreenSock]

It sounds like you want something that's more dynamic than a linear timeline. You're talking about going to various different states dynamically from whatever state you happen to be at, right? In that case, you'd need to create the animations on the fly like this: 

 

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

 

Is that what you're looking for?  

[AlanAbbo]

Thanks @GreenSock I thought I might have to go down that route.

 

Unfortunately my example is somewhat of a simplified version of what i'm doing. But based on your answer I think what i'm going to have to do is make sure I explicitly set the position / opacity / rotation / colour of all of the dynamic items for each label to make sure they get "reset" back to what they should be at that point in time.

 

In your reply pen if I navigate through each step in turn, then go back to the initial state, then to step two, I can see the highlight box move from the bottom right back up to the top left. I'd like it to react more like it does on a full first run through i.e. the highlight box simply appears at the top left.

 

I just wasn't sure if the GSAP magicians had something up their sleeves for this one 😁

[GreenSock]

Sure, I updated the CodePen accordingly. 👍