Jump to content
Search Community

how to make sprite move along curvature width right rotation like set element center?

Jessic test
Moderator Tag

Recommended Posts

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

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

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

  • Thanks 1
Link to comment
Share on other sites

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. 

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