Jump to content
Search Community

rotate the shortest way

ppdc 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

Sure, you can specify rotation to be clockwise, counter-clockwise or shortest distance thanks to our DirectionalRotation plugin (which happens to be baked into CSSPlugin).

TweenLite.to(element, 1, {rotation:"180_short"})  // shortest distance
TweenLite.to(element, 1, {rotation:"180_cw"}) //force clockwise rotation
TweenLite.to(element, 1, {rotation:"180_ccw"}) //force counter-clockwise rotation  

See it in action here:


  • Like 1
Link to comment
Share on other sites

  • 4 years later...

Hello there!


What if I would like to to that with a variable?


Something like:


 let cameraLookatTransition = {
        x: cameraLookat.x,
        y: cameraLookat.y

      let cameraActualLookat = {
        x: this.controls.getPolarAngle(),
        y: this.controls.getAzimuthalAngle()

let actualTween = new TWEEN.Tween(cameraActualLookat)
      .to(cameraLookatTransition, this.easingDuration)
      .onUpdate(function(actualLookAt) {

        controls.setRotation(this.x, this.y)


Now, this is bringing the absolute way so to say, that is, in many cases, the longest way and then it is causing my orbitCamera (threeJS) spinning really fast on a weird way.


is there any way to provide the Tween a kind of threshold? So, in my case, it would be 3.14 and -3.14 and then it would add or substract to go the shortest way.


Thanks a lot...



Link to comment
Share on other sites

  • Carl locked this topic
This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...