Jump to content
Search Community

Strange behavious with the autoRotate parameter

ncou test
Moderator Tag

Go to solution Solved by OSUblake,

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

Hi,

 

I am experiancing troubles when i activate the autorotate param on my canvas animation.

 

Here is the code pen :

 

You can enamble ou disable the autorotate param if you comment out the 1st or 2nd lines.

 

I have 5 coords on my example (it's the 5 circles), i have add a red line to join thoses points to represent the curve.

 

I am expected the pictore to follow (more or less) the line. Without the autorotate i got the picture to "stick" on the line.

But with the autorotate parameter activated, the picture seems to fall at the third point.

 

Why the autorotate param mess the tween ? am i missing somethink ?

 

PS : I tried with a bigger segment value, but without success.

See the Pen gLpwgm?editors=0010 by anon (@anon) on CodePen

Link to comment
Share on other sites

I'm not familiar with fabric.js, but it appears as though the problem is related to how it is implementing the rotational origin. Here's a codepen that simplifies things by only animating to the final value and then spinning around by animating the angle value.

 

http://codepen.io/anon/pen/RoPxeV?editors=0010

 

Notice that it's spinning around its upper left corner even though you seem to have earlier set its originX and originY to "center". All that GSAP is doing is changing the value of "angle" in that case - it's not controlling the origin. Is fabric misbehaving? Might be worth checking into its docs (unfortunately I don't have time to experiment with that - we really try to stay focused in these forums on GSAP-specific questions). Please do let us know if this helps at all and if you find a solution (or need more help). 

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