Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Scaling of an aligned object - pathDataToBezier

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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 ...



Link to comment
Share on other sites

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? 

Link to comment
Share on other sites


Hey Jack,


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


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


Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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.



  • Like 1
Link to comment
Share on other sites



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.



  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.