Jessic Posted January 10, 2020 Share Posted January 10, 2020 i want sprite can move width anchorX and anchorY 0.5 along the curvature, but i try it "xPercent: -50, yPercent: -50, transformOrigin: "50% 50%", it's only useful like element, what can i do to make sprite in pixi? See the Pen oNgqrJP by bigblueblue (@bigblueblue) on CodePen 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 10, 2020 Share Posted January 10, 2020 Hey Jessic and welcome to the GreenSock forums. xPercent, yPercent, and transformOrigin won't work on PIXI elements. Setting the anchor to 0.5 is the correct way like you have in the demo. The motion path not aligning with the blue path is separate from that. I'm not sure exactly why they don't match up, but it's clear that the midpoint for GSAP's motion path is lower than the midpoint that PIXI's bezier curve has. Maybe @GreenSock can shed some light. Link to comment Share on other sites More sharing options...
Jessic Posted January 13, 2020 Author Share Posted January 13, 2020 On 1/10/2020 at 11:07 PM, ZachSaucier said: Hey Jessic and welcome to the GreenSock forums. xPercent, yPercent, and transformOrigin won't work on PIXI elements. Setting the anchor to 0.5 is the correct way like you have in the demo. The motion path not aligning with the blue path is separate from that. I'm not sure exactly why they don't match up, but it's clear that the midpoint for GSAP's motion path is lower than the midpoint that PIXI's bezier curve has. Maybe @GreenSock can shed some light. but setting the anchor 0.5 did not work,Do you have any idea to reach this animation?I used gsap2 BezierPlugin that worked,I read this document said in gsap3 motionPath replaced bezierPlugin , this is the gsap2 demo link. See the Pen LYEmPbG by bigblueblue (@bigblueblue) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted January 13, 2020 Share Posted January 13, 2020 The type needs to "cubic", and a cubic bezier needs a starting point. See the Pen f79dc245b16afad5b9710cebc8326d3c by osublake (@osublake) on CodePen 4 Link to comment Share on other sites More sharing options...
zojin Posted January 14, 2020 Share Posted January 14, 2020 Hey sorry to piggyback off this thread, I have a related issue - if you enable autorotate with pixijs the object just spins out of control instead of facing the direction of the path the entire time. Is this a bug or is there another way to have the object follow the direction of the path? You can see what I mean here: See the Pen KKweOjq by zojin (@zojin) on CodePen 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 14, 2020 Share Posted January 14, 2020 Hey @zojin and welcome to the GreenSock forums! The funny rotation is because PIXI uses radians while GSAP uses degrees. For normal rotations GSAP has a PixiPlugin which resolves this issue. I'm not sure if MotionPathPlugin can use radians or allow a modifier to convert between degrees and radians. Maybe @GreenSock can shed some light on that. What I know will work is using a proxy element to get the proper rotation instead. You'd make sure autoRotate is false but set the rotation based on the proxy inside of one of their onUpdate functions: See the Pen RwNBabb?editors=0010 by GreenSock (@GreenSock) on CodePen However I know introducing a new element to get the rotation is not optimal. Perhaps there's some way of setting it in radians that I'm unaware of. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted January 14, 2020 Share Posted January 14, 2020 Actually, all you need to do is set useRadians: true in your motionPath vars. Sorry, we're still working on the docs, so not everything is there yet. But this should make it pretty easy for you - no proxy necessary. See the Pen bGNjpKo?editors=0010 by GreenSock (@GreenSock) on CodePen 2 2 Link to comment Share on other sites More sharing options...
zojin Posted January 15, 2020 Share Posted January 15, 2020 Awesome, thanks guys! Got it working as expected now 2 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