How to create an "Scale in & scale out" for consecutive elements

[kevchcm]

Hello, sorry if this is a dumb question, I think is more easier that what I'm make it out to be.

 

I have a rada graphic and I need to show multiple colored areas but I need to create a "scale in & scale out" (sorry for the phrase, I don't know exactly how to call this type of animation) animation for every single area, so when I show one I have to scale out before the next one.

 

 

See the Pen poPoWyd by godhandkiller (@godhandkiller) on CodePen.

[GreenSock]

There are many ways to do this. One is to just loop through each polygon and add your sequenced animations to a timeline like this: 

See the Pen yLbLjvV?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Does that help? 

[kevchcm]

9 hours ago, GreenSock said:

There are many ways to do this. One is to just loop through each polygon and add your sequenced animations to a timeline like this: 

 

 

 

Does that help? 

 

 

Thank you, that is exactly what I needed. I just added a delay of 2 seconds on the last ".to" so the color stays a little longer

[kevchcm]

@GreenSock I have another problem. I have images on the graphic so the animation has to go like this

 

1.Graph Area appears

2. Image appears

3. Image disappears

4. Graph area disappear 

and so on and on

 

 

I try to create two different timelines and adjust the times, but the images and the graphs areas always get out of sync

It's there I way I can have image image link to a graph area so they always have the correct timing?

 

Here is my updated codepen

 

See the Pen poPoWyd by godhandkiller (@godhandkiller) on CodePen.

Edited June 29, 2021 by kevchcm
Incorrect codepen link

[GreenSock]

Is there a reason you're trying to handle those things in totally different timelines? Why not just do the loop like I showed you and put the sequenced animations in there in one fell swoop? 

 

The reason things aren't matching up is because you're using very different timing for the images and the polygons. Your polygon animations take a total of 4 seconds (1 second in, 2 seconds wait, 1 second out) whereas your image animations take 3.5 seconds (1 second wait, 1 second in, 1 second wait, 0.5 seconds out). 

[GreenSock]

You don't need jQuery either. Here's a simplified version that demonstrates the approach I was suggesting which I think makes the timing of things more intuitive: 

See the Pen eYWmOJV?editors=0010 by GreenSock (@GreenSock) on CodePen.

[kevchcm]

@GreenSock That is exactly what I need, thank you so much!