Planet Orbits (Linked animations)

[jp_uk81]

Hi Guys, 

I'm trying to make this simple planet orbits animation but I finally hit the wall achieving this astronomical mess.

I know I need to somehow make the planet a child of the orbit animation but I'm not sure how.

 

Thank you in advance

Gp

See the Pen dybJeLe by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen.

[mikel]

Hey @jp_uk81,

 

Maybe this pen helps ...

 

function mapToPath() {
  var path = MorphSVGPlugin.pathDataToBezier(orbit, {align:planet});
  //create a tween of the planet along that path and jump to the progress that the timeline is at.
  TweenLite.to(planet, time, {bezier:{values:path, type:"cubic"}}).progress(action.progress());
}

See the Pen gyYWEe by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

[ZachSaucier]

Also relevant, without an explicit path:

 

See the Pen sGbku by ZachSaucier (@ZachSaucier) on CodePen.

[OSUblake]

1 hour ago, ZachSaucier said:

Also relevant, without an explicit path:

 

You might want to set the body overflow to hidden. The scrollbar on Windows is going crazy in the embedded view.

[jp_uk81]

Thanks guys, 

I've achieved some kind of sync between the orbit rotation and planet anim but I can't understand how the progress() works...

it only gets the time of the orbit1_anim?

 

See the Pen dybJeLe by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen.

 

[ZachSaucier]

Check out the progress docs  

 

What's your goal here? I'm not sure what you're hoping to do in rotating the orbit like that. 

[jp_uk81]

I've cheated!

See the Pen dybJeLe by gianpiero-di-lullo (@gianpiero-di-lullo) on CodePen.

 

Thank you for your support

[ZachSaucier]

Nice work! 

 

Generally speaking it's good to make forks (new versions) of your demos each time you post it so that others viewing the thread later can follow along with what happened. Don't worry about it in this case  

[jp_uk81]

ok thank you Zach, I'll keep it in mind next time