Draggable error in version 12 when using disable()

[G. Scott]

I'm trying to enable and disable Draggable and it is causing an error:

Uncaught Range Error: Maximum call stack size exceeded

 

It's a snippet I've used many times and only throws the error in version 12+. You can see it in action in the CodePen.

 

I'm using a matchMedia listener to trigger the Draggable div to enable on small screen, and disable on large. If you drag the browser window < 1024 you will see that it enables just fine. But if you drag it back out > 1025px wide, when it disables, it throws the error. Interestingly, if you don't actually interact with the draggable div, it won't throw the error. But if you enable it, then drag the element, and then disable it again, then you get the error. I checked and made sure the matchMedia listener is only firing when it changes, and not in any kind of loop. And again, if I switch to a version of Draggable < version 12, it works perfectly.

 

Hope the CodePen is ok... don't use that too much:-)

 

See the Pen yLQadBQ by g3logic (@g3logic) on CodePen

[GreenSock]

Great catch! Sorry about that - it's resolved in the next release which you can preview at https://assets.codepen.io/16327/Draggable3.min.js (you may need to clear your cache). We'll be pushing that live very soon.

 

It'd only happen if you had inertia enabled.

 

Thanks for the excellent minimal demo! That's super helpful. I wish everyone was as thoughtful when reporting an issue. 🙌 

[GreenSock]

By the way, are you familiar with gsap.matchMedia()? It might be super helpful. 

[G. Scott]

First of all, I have to confess that this is the first time I've included a codepen. I know it makes your life easier... I'm just usually up to my ears. But I'm glad I did this time and a little giddy that it wasn't something dumb that I was doing! 😅 Anyway, now that I see how easy it was I'll be sure to always include a codepen going forward.

 

With regards to gsap.matchMedia... yes I have used it VERY successfully! Didn't think to on this for some reason. Would it make more sense with Draggable? Would it reset the position of the element when Draggable was disabled? Or would I still need to set the x coordinate back.

 

Those GSAP utilities are sneaky powerful!

[GreenSock]

8 hours ago, G. Scott said:

With regards to gsap.matchMedia... yes I have used it VERY successfully! Didn't think to on this for some reason. Would it make more sense with Draggable? Would it reset the position of the element when Draggable was disabled? Or would I still need to set the x coordinate back.

Yep. All your previous code could be simplified to this: 

See the Pen vYQyNVp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Isn't that nice?

[G. Scott]

That is ridiculous! Thank you so much! I never even considered trying this... but it is now officially part of my gsap arsenal! LOL

 

THANKS AGAIN, Jack! You make this fun!