glasseye07 Posted June 15, 2020 Share Posted June 15, 2020 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 More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 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 More sharing options...
glasseye07 Posted June 15, 2020 Author Share Posted June 15, 2020 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 More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 First off, make sure to include MotionPathPlugin in your demo. Secondly, I'd recommend to include the scale value before/after the part when you want it to scale. For example: See the Pen qBbaavj?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
glasseye07 Posted June 15, 2020 Author Share Posted June 15, 2020 Thank you. Link to comment Share on other sites More sharing options...
glasseye07 Posted June 18, 2020 Author Share Posted June 18, 2020 Hi, I've been trying to use your demo with Pixi but getting mad results. When I don't use scale it works fine, but when using scale set to 1 (so it should have no effect), the sprite seems to disappear ? Comment and uncomment line 14 to see what I mean. See the Pen RwrodEN by glasseye07 (@glasseye07) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 That's because the bunny object doesn't have a direct scale property. I recommend using the PixiPlugin to where GSAP finds the scale object for you: See the Pen pogNXxW?editors=0010 by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
SDSingh Posted June 21, 2021 Share Posted June 21, 2021 We can access scale in GSAP by adding the following in the code:- gsap.to(bunny, { duration: 1, scale:{x:2,y:2} // <-- comment this line to see sprite }); Link to comment Share on other sites More sharing options...
OSUblake Posted June 21, 2021 Share Posted June 21, 2021 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 } }); 2 Link to comment Share on other sites More sharing options...
SDSingh Posted June 22, 2021 Share Posted June 22, 2021 For MotionPath I wanted to use the scale along with x and y positions for a pixi object. Can you suggest a solution for that? Link to comment Share on other sites More sharing options...
OSUblake Posted June 22, 2021 Share Posted June 22, 2021 3 hours ago, SDSingh said: For MotionPath I wanted to use the scale along with x and y positions for a pixi object. Do you mean like this? See the Pen gOmJogL by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
OSUblake Posted June 22, 2021 Share Posted June 22, 2021 Another good one. Use graphics to create a motion path. See the Pen JjWqMQG by GreenSock (@GreenSock) on CodePen 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now