MotonPathPlugin problem. animation doesn't work correct on page resize.

[Dzhuleikhan]

Hello everyone,

I have a little motionpath plugin problem on my website.

So if you scroll down to planets section, you will see that each planet moving through his own path.

The problem is, when i refresh the page on the same section planets position is not correct. I will provide screenshots.
Also, when i resize the page i have the same issue.

Is there any way to stick each planet to his own path? 
 

Thanks

See the Pen QWBJgxX by juleykhan32 (@juleykhan32) on CodePen

[Cassie]

Can you house the planets inside the SVG?

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

[GreenSock]

If you can't do what Cassie suggested, here's how you could handle it: 

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

 

Basically, put it all into a timeline, then when the screen resizes record the current progress, revert() the timeline, create a new one and populate it so that it can map all the new path positions, and skip to the recorded progress value. 

[Dzhuleikhan]

12 hours ago, GreenSock said:

If you can't do what Cassie suggested, here's how you could handle it: 

 

 

 

Basically, put it all into a timeline, then when the screen resizes record the current progress, revert() the timeline, create a new one and populate it so that it can map all the new path positions, and skip to the recorded progress value. 

Thank you so much for help.
Can you please show me how to fix an issue on page refreash?
So when i scroll down to planet section, and refreshing the page, planets chenge their positions.
I provided two screenshots normal position and position after page refreshed.

Thanks!

[Dzhuleikhan]

15 hours ago, Cassie said:

Can you house the planets inside the SVG?
 

 

Unfortunately can't do it, becauseplanets are not just a circle, there divs with image inside and card popup onclick

[GreenSock]

12 hours ago, Dzhuleikhan said:

Can you please show me how to fix an issue on page refreash?
So when i scroll down to planet section, and refreshing the page, planets chenge their positions.

I'm not sure I understand - if you refresh the page, of course everything starts over. Are you saying you want to somehow record the state of things before the page gets refreshed, and then after it refreshes you want it to read that state and reposition things to match the progress of the animations before the refresh? If so, you'd need to record that in local storage (the progress value) and then read that back on page load and set the progress accordingly.