mothionPath not follow exact path when scaling the parent

[tnagele]

Hi,

I am trying to make a simple editor, in a page the "box" should follow the path "motionPath". This works fine, but when the page gets scaled down (or up), the box does not follow the path, it seems, it creates and follows a scaled version of the path. Please check the pen, try to play first when the page with no scale (scale =1), then try to change the scale and play again. I need the box to follow the path always, regardless of the parent page scale value.

 

I did some troubleshooting, I found it because of the property: "align: "#path", if removed it will follow the path always, but as you know I need this property in order to be able to control "alignOrigin". Is there any solution?

See the Pen wvVVKLZ by tnagele (@tnagele) on CodePen.

[mvaneijgen]

scale and transform: scale() are two different properties, really confusing we know. Personally I would never use the scale property directly and only use the transform scale, this one is much more stable. 

 

Side note instead of page.style... since you're already using GSAP you can also use .set() much easier syntax in my option and GSAP exposes all the transform properties directly. 

 

Hope it helps and happy tweening! 

 

See the Pen wvVVgvy?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

[tnagele]

WOW. Best Team ever!

 

Thank you very much!