How do I achieve the scale down and up effect like I've explained below ?

[johndoe000]

Based on the element's position of motion path, in my case ellipse, I want the scaling of the element. For example, the element that's on the front, I want it to scale 100%, when the same element moves to left side, it scales down to 75%, once it reaches the back, it scales down more to 50%. And when the element reaches the right position, scale it up to 75% again and when it is again on the front, again scale up to 100%. Now this behaviour is to be followed by each elements thats moving along the path.

 

For example, when content 1 is on the front, content 3 will be on the back, content 2 will be on the left and content 4 will be on the right. Now the scaling is such, content 1 is 100%, content 2 and content 4 are 75%, content 3 is 50%.

See the Pen KKEWaWB?editors=1011 by green_viper (@green_viper) on CodePen

[mvaneijgen]

How is this question different from your previous questions In that topic there are several solutions given to that all allow you to create this effect with different outcomes. 

 

 

[johndoe000]

@mvaneijgen, Well, technically what I wanted to ask as a follow up was if there was a way for me to track the position of each element moving along the path so that I can animate each a little differently based on the position of each on the motion path ?

[GreenSock]

Maybe instead of doing one tween that's handling ALL of the elements, just do a simple .forEach() loop to create a separate animation for each one according to whatever you want them to do. 

[johndoe000]

Of course, I could. Thank You!!

Stupid Me.