Jump to content
Search Community

DirectionalRotation plugin - Short way not working properly

Richacinas 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

Hello there.

 

I'm trying to make the directional rotation plugin work with this simple object, however, it is not behaving properly.

 

I tried to set up a codepen but it says TWEEN is not defined, and I'm not sure why.

 

See the Pen RQmYzq by Richacinas (@Richacinas) on CodePen

 

The thing is, I would like to go the short way always, setting up rotation in radians inside a sphere. But it is not working as expected.

 

Here is what the console is throwing:

 

 

shot.jpg.9526b3135b35544b6c34889a4616e5d6.jpg

 

Link to comment
Share on other sites

Looking at your example, it feels like you are confusing GSAP with something else. Many methods you have used are not part of GSAP API.

 

In the demo  below I am animating values of an object and using them to update the div, div is not directly being animated. You can see from example how you can use directional plugin. From what I tested, it is working as expected, see if it helps.

 

See the Pen eVaPxr?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

  • Like 3
Link to comment
Share on other sites

1 hour ago, Sahil said:

Looking at your example, it feels like you are confusing GSAP with something else. Many methods you have used are not part of GSAP API.

 

In the demo  below I am animating values of an object and using them to update the div, div is not directly being animated. You can see from example how you can use directional plugin. From what I tested, it is working as expected, see if it helps.

 

See the Pen eVaPxr?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

 

 

Hi there @Sahil and thanks for your kind answer.

 

I guess that by "many methods" you mean this line:

 

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

 

Yes, that is part of my app logic, but anyway I wanted to focus on the important stuff and that is the x and y values that onUpdate is bringing on every call.

 

Your example works, and thanks to you I could mine work too. 

 

What I want to state is that, the only difference between your code and mine, is:

 

- My animation time was specified in milliseconds, and in this case it should be seconds.

- I was using new TWEEN.Tween... and you are just using the static class to declare a Tween and then changing values inside onUpdate.

 

What comes up from this, is that there is no way to make directionalRotation work when you try to create a Tween the way I was doing it. It only works your way, but I don't know why...

 

thanks a lot,

 

Ricardo

Link to comment
Share on other sites

@Carl sorry for posting it in different places, but:

 

1. I posted it on github issues because I think it could be an issue.

2. I posted it on a 2013 post, without realizing the year, and then when I realized:

3. I posted it here as a new post.

 

 

Thanks and sorry for the trouble

Link to comment
Share on other sites

No worries. It happens.

 

What Sahil was trying to point out is that the code you are using

 

let actualTween = new TWEEN.Tween(origin)

 

Is in no way related to GreenSock's API (TweenLite, TweenMax, DirectionalRotationPlugin, etc).

 

It looks like Tween.js http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/

 

GSAP can animate any numeric property and works amazingly with (DOM/CSS, SVG and canvas)

https://greensock.com/gsap

 

People have great success using GSAP with Three.js to rotate / move cameras and objects 

See the Pen EaNoEd?editors=0010 by cx20 (@cx20) on CodePen

 

See the Pen dILAG by zadvorsky (@zadvorsky) on CodePen

See the Pen waQMKQ by zadvorsky (@zadvorsky) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Wow.

 

You just made me realize that we are using this other library in our project.

 

You are right man, thanks for pointing out, and of course, I prefer GSAP, as I used it for another projects (PIXIjs, SVG..) and it works like a charm.

 

Rock on

  • Like 1
Link to comment
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.
×
×
  • Create New...