Jump to content
Search Community

Can't rotate a PixiJs Sprite correctly

amicoderozer test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts


I am using Gsap to animate PixiJs sprites. I use it in my project without any problem, with animation of all kind, but when I try to rotate a Sprite, I don't have the expected results.

I want my Sprite to rotate left, but it has to remain in the same position when rotating.

The result I am expecting is something like the orange box in this example


I tried a lot of properties, but I can't figure it out how to make it work.

I am using the PixiPlugin to rotate the object, otherwise if using normal rotation properties, it will start spinning a lot.

I made a codepen to show my problem, you have to over on the bunnies to make it rotate.

On the left bunny I used PixiJs plugin and as you can see, the object is rotating and moving up (so I am close, but I want it to rotate and don't move).

On the right bunny I didn't use the plugin and the object start spinning like crazy.

I tried using transformOrigin property and smoothOrigin, but Gsap is telling me that he doesn't know that properties.


Can someone help me? What am I missing?

Thank you very much.

See the Pen poqJBgo by Alberto-Simeoni (@Alberto-Simeoni) on CodePen

Link to comment
Share on other sites

  • Solution

Hi @amicoderozer and welcome to the GreenSock forums!


PIXI display objects are a different thing than regular DOM nodes, that's why transform origin is not having any effect. You have to use a specific property of the PIXI Display object to set the transform point or origin point soto speak. In PIXI that is the anchor property:



This should work in the way you expect:

let pixiBunny = PIXI.Sprite.from(texture);


pixiBunny.cursor = "pointer";
pixiBunny.interactive = true;

// This set the transform point

pixiBunny.x = 100;
pixiBunny.y = 100;

pixiBunny.onmouseover = () => {
  gsap.to(pixiBunny, { pixi: { rotation: -45 }, duration: 1 });


Hopefully this helps.

Happy Tweening!

  • 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...