Can't rotate a PixiJs Sprite correctly

[amicoderozer]

Hello,

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

[Rodrigo]

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:

http://pixijs.download/release/docs/PIXI.Sprite.html#anchor

 

This should work in the way you expect:

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

app.stage.addChild(pixiBunny);

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

// This set the transform point
pixiBunny.anchor.set(0.5);

pixiBunny.scale.set(3);
pixiBunny.x = 100;
pixiBunny.y = 100;

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

 

Hopefully this helps.

Happy Tweening!

[amicoderozer]

Thank you very much @Rodrigo, it worked like a charm!