Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
kevchcm

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

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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? 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Posted (edited)

@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 by kevchcm
Incorrect codepen link
Link to comment
Share on other sites

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). 

  • Like 1
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×