Jump to content
Search Community

Draggable jumps to end

Guido 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,

 

I've got a weird problem with my code.

I got a draggable element which is divided in 8 steps (each 45 degrees).

When I am at 270 degrees and want to turn it 45 degrees (to 315 degrees) it jumps straight to the max which is 360 degrees.

Sometimes it also happens at a random degree but it is very good reproducable with the 270 degrees to 315.

 

I am using:

 - TweenMax

- TimelineMax

- CustomEase

- Draggable

- DrawSVG

- ThrowProps

 

Using Chrome 61.0.3163.100 on Ubuntu but got it reproducable on firefox (Ubuntu & window 10) and IE (windows 10).

 

I hope someone can help me :)

See the Pen goMWOp by exploretheworld (@exploretheworld) on CodePen

Link to comment
Share on other sites

Hi Guido

 

After some initial testing I can conclude that there's a problem with the bounds.

 

When it jumps, it does so to either 360 or 0. If you keep holding the mouse button down, and drag the mouse pointer once cw or ccw arround the center, it starts moving again. The behaviour is the same as if you keep pulling the mouse arround the center (and then back again) after the knob has hit max- or min bounds.

 

Edit:

Scratch that. The rotation value is increased or decreased by 360 if using bounds or not. It was just a symptom.

 

I have no idea what's going on, but maybe someone will find the observation useful :)

Link to comment
Share on other sites

Aha! Great catch. Sorry about that. Okay, it has to do with the complexities in measuring angles that cross thresholds (like 179.9 degrees to -179.9 degrees is literally just 0.2 degrees apart functionally, but mathematically they're 359.8 degrees apart). Draggable has code in place to handle that, but you ran into a very particular case with bounds where it glitched. That should be fixed in the upcoming release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

Better? 

  • Like 5
Link to comment
Share on other sites

48 minutes ago, Sahil said:

@GreenSock I had hard time reproducing this issue because I was using 1.20.2. The try club plugins

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

also still points to libraries older by version or two. So my question is, is it possible for you to request Codepen to make all GSAP files available via their new search feature?

 

That would be nice, but is probably something CodePen has no control over. CodePen is just searching cdnjs, but it doesn't bring up results for different files within a library, like Draggable.

 

At one point in time, cdnjs allowed for a "latest" version, but they've discontinued that. If you try to use that format, it will serve you v1.18.0.

https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js

 

 

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