Scaling of an aligned object - pathDataToBezier

[mikel]

Hey,

 

The scaling effect is a little bit crazy - but nice:

 

See the Pen YQQVRz by mikeK (@mikeK) on CodePen

 

While the SHARKS set centered on the path they swim away when scaling down.
What is the reason for this?

 

I didn´t touch ...

 

 

[GreenSock]

I'm not sure I understand your question (a very reduced test case would be helpful), but I'm guessing that the issue is your transformOrigin. Remember, it'll scale from the origin. If you've got it set to "bottom", but you've got things centered on the path, it would make sense that scaling would make it appear to move away from the path. Does that make sense? 

[mikel]

 

Hey Jack,

 

Thanks. That´s the point - here forked the official case: 

 

See the Pen bRRJgO by mikeK (@mikeK) on CodePen

 

[GreenSock]

I'm still struggling to understand the question. In that example, if you set the transformOrigin to "50% 50%" (or "center center"), it doesn't drift away from the path at all. Are you asking how to keep the transformOrigin off-center but still make it act like it's scaling from the center on the path? Sorry if I'm missing something obvious here. 

[PointC]

I'm a little confused too. In the balloon example, if you wanted the scaling to happen from the center and have it centered on the path, you'd set the transformOrigin to center. If you wanted it to scale from the bottom of the balloon and have that point follow the path, you could use a yPercent of -100 and transform the origin to the bottom.

 

TweenLite.set("#balloon", {xPercent:-50, yPercent:-100});
tween = TweenLite.to("#balloon", 10, {bezier:{values:motionPath, type:"cubic"}, scale:0.3, transformOrigin:"center bottom", onUpdate:updateSlider});

 

I'm not sure if that answers the question or not, but depending on what you want to happen, it's usually a mix of transformOrigin and the x/yPercent values.

 

[mikel]

Hey,

 

Sorry for irritations. It was my fault: too fast, not concentrated when forking the pen.

 

It's now quite plain to me: the mix and relation of transformOrigin and the x/yPercent values.

 

See the Pen eREZRE by mikeK (@mikeK) on CodePen

 

 

Thanks a lot for taking care of my coding attempts.