Jump to content
Search Community

Directional rotations do not work with PIXI plugins

whales test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am trying to use directional rotation plugins together with pixi.js plugins. 


However, it doesn't seem to be working. If you undo the comments in the codepen: , you could see that I tried three different ways:


1  directly adding "_cw" doesn't work

2. using directional rotation plugin without pixi.js plugin result in crazy rotating
3. combining directional rotation plugin with pixi plugin doesn't work at all. no rotations.


Can anyone help? 


Or if this is not possible yet, can anyone shed some lights on how to do directional rotations with pixi.js?


This is the simplified versions of a project I am working on:

See the Pen JvoWYY?editors=0010 by asiankingofwhales (@asiankingofwhales) on CodePen

. Basically, I have a constantly rotating object, then at one point, I decide to rotate it to a certain point. However, I want all the rotations to be clockwise, which isn't possible at this point.


I tried accessing the current rotations values, and then calculate the difference between the current and the destination values, then using the "=+" to do clockwise rotation. However, the value I am accessing always seems to be outdated.


Because if the rectangle is constantly rotating, I might be getting a rotation value now, but by the time I used it to calculate differences, it's already moving to a bigger rotational angle. Or am i wrong? 


Any other other solutions to this problems? 


See the Pen RyNKBR?editors=0010 by asiankingofwhales (@asiankingofwhales) on CodePen

Link to comment
Share on other sites

Hi Prison Mike ;)


Just want to point out that DirectionalRotationPlugin is built into TweenMax. 


TweenMax.to(rectangle, 3, {
  directionalRotation: {
    rotation: degToRad(90) + "_ccw", 
    useRadians: true


Notice how this pen is only loading TweenMax, PixiPlugin and Pixi (http://prntscr.com/j7byn7)


See the Pen ZoYyZV?editors=0010 by GreenSock (@GreenSock) on CodePen


  • Like 5
Link to comment
Share on other sites

  • 1 year later...

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