Jump to content
GreenSock

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

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

 

  • Like 2
  • Thanks 1

Share this post


Link to post
Share on other sites

Awesome, thanks guys! Got it working as expected now :)

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×