GSAP v3 - MotionPathPlugin - Scale throws the path off?

[Maximuslight]

Hello everyone,

 

Have started learning GSAP and it's a blast! Picked great time with GSAP3 being freshly out. ?

I wanted to try out my hand on the moving "objects" via svg paths, and everything was going well... until I used scale property on the MotionPathPlugin, which throws object out of place.

Please take a look at the codepen, the green square with out  scale follows the path perfectly, however as soon as I set any scale (please see the red square) it throws off the position away from the path.

 

What am I missing?

Kind Regards,
Max

See the Pen rNNoEjO by maximuslight (@maximuslight) on CodePen

[ZachSaucier]

Hey Max, welcome to the GreenSock forums!

 

In situations like this, you should animate a container of the element along the path and then scale up whatever you need to inside of that container. The reason for this is because it'd be performance intensive for MotionPathPlugin to make a bunch of recalculations every single update to make sure that the element is in the right location. By separating the two animations, it can use the same calculations that it made at the beginning  

 

Thankfully keeping the two animations in sync is easy in GSAP 3! Just use a timeline, position them both at the same point (I used "<" to position the start location of the one before it), and use the timeline's defaults to make both tweens inherit the shared properties!

 

See the Pen dyyabWY by GreenSock (@GreenSock) on CodePen

 

Happy tweening.

[Maximuslight]

Hi ZachSaucier,

This makes perfect sense to use container!

 

Thanks a million for your reply, this has helped me a lot. ?

 

Kind Regards,
Max

[GreenSock]

Just following up: The latest version of GSAP is able to do this without any container. 👍 You can set alignOrigin: [0.5, 0.5]