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:

http://codepen.io/GreenSock/full/jiEyG

  • 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)
      })
      .easing(TWEEN.Easing.Sinusoidal.Out)
      .start();

 

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

 

Ricardo

Link to comment
Share on other sites

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

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