Jump to content
GreenSock

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

Directional rotations do not work with PIXI plugins

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 post
Share on other sites

Directional rotation is not built into the plugin. Maybe @GreenSock can add it.

 

You'll have to use it at as separate plugin.

tl.to(rectangle, 4, {
  pixi: {
    ...    
  },
  directionalRotation: {
    rotation: degToRad(90) + "_cw",
    useRadians: true
  }
}, 1)

 

  • Like 3
Link to post
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 post
Share on other sites

On behalf of the whole Scranton Office, we thank you, Carl.

  • Haha 3
Link to post
Share on other sites

For anyone who stumbles across this thread, we added directional rotation capabilities to PixiPlugin in GSAP 3.2.0 🎉

  • Like 1
Link to post
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.

×