Jump to content
Search Community

Draggable blocks native scroll event

usheeen 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

Ummm... I guess it was some kind of phantom glitch, because it's working properly now. And this problem wasn't limited to CodePen or any particular browser.


What was happening when you pressed it, is that it would fire onPress -> onDragStart -> onDrag. Likewise, when you released it, it would fire onRelease -> onDragEnd.


This problem started when I went to test out the Draggable update with a project that I was working on, and I noticed that all my callbacks were firing during a mouse press . I cleared my cache multiple times, and the problem still persisted, so I recreated the problem in CodePen and made that post. I'm pretty sure Diaco saw what was going on because his suggestion of rounding the values in a snap function fixed the problem at that time. As to why it's working now, I'm clueless.  :blink:

Link to comment
Share on other sites

Not sure what happened, but I did run into a caching issue and I had to add a ?r=993 (random number) to the end of the URL to make sure I was getting the latest TweenMax and Draggable. Maybe you had a similar thing going on. I dunno, but please let me know if you run into any issues. If anyone else can reproduce the issue, I'd love to hear about it. I double-checked the latest code and I didn't see any issues that'd cause that behavior, although I every well may have missed something. It seems to be workin' like a champ now. 

  • Like 1
Link to comment
Share on other sites

If Diaco can confirm that he saw my problem, then I'm guessing it might have been some sort of caching issue we were both experiencing. If he didn't see my problem, and just guessed that snapping the values would fix it, then I'm thinking that my touch monitors were the culprits. Maybe some dirt or a smudge was interfering with the events. I do have an unresolved issue with my touch monitors, although I wasn't using both of them when I encountered this problem.


Link to comment
Share on other sites

OSUblake, you sneaky devil you. Inspecting the source and sniffing out those undocumented parameters, huh? :)


I chose not to document that parameter for now because I wanted to wait to see if anyone brings up use cases where it's beneficial. Sometimes I'll do that, and then it's nice because it's there if we need it, but it gives us some flexibility in terms of our commitment level to a particular feature/parameter. 


diagonalThreshold is a number that basically controls how sensitive it is to diagonal movement. If you set it to 1, it will only report "up", "right", "down", or "left" (no diagonals). However, if you set it to 2 (the default), there's a certain range between which it'll return the diagonal values like "up-left", "up-right", "down-left" or "down-right". The higher the number, the wider that range gets (the more likely you'll get those combo-values). It should never be set below 1. 


Why a simple number like that? Mostly because I'm using an optimized algorithm internally that leverages ratios rather than doing more CPU-intensive angle-based Math.atan2() or Math.cos() or Math.sin(). Those all boil down to ratios anyway. 


So the moral of the story is: diagonalThreshold can be set to 1 if you want to prevent mixed-values, or you can increase the number to make it more and more likely to return the diagonal combo-values. 


Make sense or did I botch the explanation? 

  • Like 3
Link to comment
Share on other sites

This is why I LOVE GSAP!

I am having the same exact problem being described here in my current project. 


At first I was doing what the other forum replies suggested, by disabling the ones not in play. That works, but kills phone performance. 

I have been pulling my hair out trying to figure out a performant way of doing this. 


Love the new updates as well!!

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