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 https://codepen.io/alanablett/pen/VwvENQj 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