Motionpath responsiveness issue

[ShikharS]

Hello!

In the codepen demo, I want the circle to orbit the rectangle. It works perfectly on page load. However, upon resize, despite killing the previous tween and creating a new one with updated values for the motionPath plugin, the circle moves in random directions instead of orbiting the rectangle. How can I make sure that the circle moves around the rectangle after resizing (just like how it works on page load)?

PS - I encounter this console error post resize - "Unable to preventDefault inside passive event listener due to target being treated as passive."  Could this relate to my issue?

Thanks!

See the Pen ExJzNar?editors=0010 by Shikhar007 (@Shikhar007) on CodePen

[Trapti]

I am not sure what is the issue with the current setup. But isn't it easier to just do with SVG and motion path. 

[PointC]

I think you'd just need to clearProps when you resize and kill the tween.

 

See the Pen 03ab931389596f7fd6e582a8f9c6c1ec by PointC (@PointC) on CodePen

 

But I agree with @Trapti, there are easier ways to do this with an SVG.

 

Happy tweening.

[ShikharS]

The demo I provided is just a small part of a larger animation I'm building, so svg wouldn't work in this case. But clearProps works perfectly. Thank you @Trapti and @PointC

[GreenSock]

Just so you know, you could just call tween.revert() instead of doing both kill() and clearProps. 

 

You could also record the progress in your resize handler, and then re-apply that to make things continuous: 

 

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