Jump to content
Search Community

MotionPath path and scale

glasseye07 test
Moderator Tag

Recommended Posts

Hi,

I'm trying to scale an object as it moves along a path.  As if it you are looking down on a ball bouncing.

 

When I leave scale out it works fine, :

let path = [
  { x: 120, y: 0 },
  { x: 0, y: 568 },
  { x: 168, y: 714 },
  { x: 240, y: 627 },
  { x: 118, y: 411 }
];

 

but when I used scale it goes allover the place (I've tried other array layouts but this is the only one that will not cause an error).

let path = [
  { x: 120, y: 0 },
  { scale: 0.2, rotation: 10 },
  { x: 0, y: 568 },
  { x: 168, y: 714 },
  { scale: 5, rotation: 10 },
  { x: 240, y: 627 },
  { x: 118, y: 411 }
];

Cant find any examples of how to make this work  and in docs paths either only use x and y or scale and rotation?

 

Any help would be gratefully appreciated.

See the Pen QWyKWNg by glasseye07 (@glasseye07) on CodePen

Link to comment
Share on other sites

Hey glasseye07 and welcome to the GreenSock forums! 

 

I'm not sure that I understand what you're trying to accomplish. Are you trying to move the box along a path and scale it as it goes? Or are you trying to sequence a series of movements with different parts scaling it (i.e. move, move, scale, move)?

Link to comment
Share on other sites

Hi Zach,

 

Thank you, long time intermittent user and fan of Greensock. What you do is awesome.

 

Yes, I want to move a PixiJS sprite from point A (with a scale of say 0.5) to point C (with a scale of say 0.5). On its journey between A and C it crosses point B with a scale of 2.0. So it scales up and down as it moves along between the points.

 

Logically a point on a path should be able to accept all the properties ( such as  { x: 120, y: 0, scale: 0.2, rotation: 10 }, like a keyframe in animation ), but that does not work.

 

Any help would be appreciated.

Link to comment
Share on other sites

  • 1 year later...
17 hours ago, SDSingh said:

gsap.to(bunny, {
            duration: 1,
            scale:{x:2,y:2} // <-- comment this line to see sprite
        });

 

It would need to be like this.

gsap.to(bunny.scale, {
  duration: 1,
  x: 2,
  y: 2
});

 

Or with the PixiPlugin.

gsap.to(bunny, {
  duration: 1,
  pixi: { scale: 2 }
});

 

  • Like 2
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.
×
×
  • Create New...