MotionPath and Scale

[iDVB]

I've looked at a number of threads asking this similar affect. 

None quite capture what I'm hoping to do.

I have a motionPath set using an svg <ellipse> that is animating a number orbs around the circle.

When the orbs are near the back of the circle (top of ellipse looks farther away) they should be smaller and at the front bigger.

I was hoping to use a modifier that would simply take the progress along the path to set the scale. But I'm not sure how to get the progress inside a modifier.
The other challenge I have is that the start and end points on the <ellipse> don't quick net to the initial alignment I want for the orbs so it just means that the closest to the screen part of the path is actually an odd number like 0.03 .... so anything lower or higher in progress should be smaller in scale.

 

Also, the animation is a bit more complex in that, while it always needs to maintain that depth as far as the orbs scale go. Also, there is a planet (circle) in the middle and the z-index of planet and orbs should be swapped during the animation the make it look like the orbs are going in front and then behind the planet.

 

the overall animation should:
- spin, fade,scale into view on the path where Orb1 is front and center

- wait 2s and then progress the orbs along path so that Orb2 is front and center do this until Orb3.

- then cross-fade the colors of the orbs to green

- then proceed to progress the orbs along the path same as above for 3 more orbs (pausing for 2s on each)

- then stop all animation

 

I think I could just use a hand with the motionPath + scale part and the rest I can do. But I thought it important to describe the overall to understand we can't just loop infinitly.
 

See the Pen YzMjEJE?editors=0010 by iDVB (@iDVB) on CodePen

[Sahil]

To get  progress inside the modifier function, use regular function. Arrow function will inherit value for 'this' from enclosing scope, so in this case it will be window, if you use regular function then you can get progress using 'this.progress()'. z-index, you need to swap orbs manually.

[iDVB]

Thanks @Sahilbut does that progress represent the overall progress or the individual one?

I think the issue is then that if there is easing on the motionPath animation the scaling could be off?

[Sahil]

Ya, if you want to use ease then use this.ratio instead of progress. It will give you actual value that is being used to apply ease, it can go beyond 1 on certain eases. To get individual progress, use a loop to create tween for each orb.

Additionally, now that I rethink your goal, it is a bit too complex. It would be easy to create this effect by manually calculating position of orbs and rotating them around. If you still want to use MotionPath and ease then you may have to use getPositionOnPath and use these values to calculate scale, this way scale won't be tied to progress.

[iDVB]

Thanks @Sahilwould REALLY love to see a working example, maybe with a fork of what I provided. 
We've been playing with this all day and made little progress.

[Sahil]

There you go

See the Pen eYojXbm by SahilAFX (@SahilAFX) on CodePen

 

I have set fixed dimensions for container for demo. When you make it responsive, you will need to change the value by which you divide pos.y. You can use getBBox method of svg to get current height of the path.  You will need to tweak animation and calculation for desired effect.