Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
knalle

Draggable not working in Firefox

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

Draggable works perfectly in all browsers - except Firefox (Windows - haven't tested on Mac yet). It gives me this error:


TypeError: Argument 1 of SVGPoint.matrixTransform is not an object.

 

And then the Draggable is not working at all :(

 

Check it here:

http://gsap.mouret.dk/

 

Any suggestions?

Share this post


Link to post
Share on other sites

Hello @knalle and Welcome to the GreenSock Forum!

 

Darggable does indeed work in Firefox. It looks like something in your code. ;)

 

To better help you can you please setup a limited reduced codepen example so we can test your code in a live editable environment? This will be very difficult to debug and test your code with all your markup and code. Also let us know exactly what you want us to do to replicate your issue.

 

 

Thanks ! :)

  • Like 4

Share this post


Link to post
Share on other sites

Yup, Jonathan is exactly right. A reduced demo will be a big help. I looked at your site in FF and it wasn't clear to me what element was supposed to be Draggable. 

 

Just fork the demo below (it already loads TweenMax and Draggable), and add just enough code to make it break in FF. We will gladly give it a look.

 

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

 

Thanks!

  • Like 2

Share this post


Link to post
Share on other sites

codepen - the snapping isn't working in the pen ... but it appears to working in firefix here. 

See the Pen PjrQjq by knalle (@knalle) on CodePen

 

 

Share this post


Link to post
Share on other sites

it's the area beneath the image that is supposed to be draggable (and it is working in the pen somehow)... but I cannot work out why the link I posted isn't working in FF :(

Share this post


Link to post
Share on other sites

Thanks for the effort to create a demo. Being that the demo works (as I understand it) its kind of tough to use it for troubleshooting.

 

One thing I did notice is that on your site you are using an older version of Draggable, try loading in the one that ships with GSAP 1.20.2

Try updating to the latest TweenMax and Draggable

http://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js

http://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js

 

I'll see if someone else knows what a likely cause for that error is.

 

In the meantime, whatever you can do to simplify the demo (remove menu, unnecessary text and images)  and make Draggable break might be of some help.

 

  • Like 3

Share this post


Link to post
Share on other sites

aaaahh stupid and a bit weird error :)

I use the lovely ScrollMagic and while developing I use the addIndicators plugin... and every now and then I hide the indicator through CSS with:

script ~ div {display: none;}

 

Since the indicators (divs that has no IDs og classes) were added after the last <script> tag - so I though I had come up with a smart way of targetting those divs :D


I had not transferred that CSS line to the Codepen, so it worked of course ;)

 

So it works now, but I don't understand how it causes the error in Firefox (?).

 

  • Like 1

Share this post


Link to post
Share on other sites

I'm jumping in a little late here, and it appears as though you already applied a fix to that initial link so I can't quite see what the problem was, but I can say that Firefox had some known issues with throwing errors when trying to get information about SVG elements that weren't in the DOM (or had display:none). We've implemented various workarounds for that since discovering that Firefox bug, so I'm not sure if that was the culprit or not (and maybe just updating to the latest Draggable solved it for you). Anyway, I'm glad to hear you got things working now. 

 

Happy tweening (and dragging)!

  • Like 1

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×