DrawSVG not working in Firefox

[Playground Inc. 0 Likes (Newbie)]

Hi All, 

I'm hoping to get some help with some animations I've been working on. It works well all browsers, except FireFox. 
In the console I can see an error `TypeError: i is undefined`. On my local it appears that this error is originating on line 97 of DrawSVG plugin. 

I was looking at the plugin code and noticed that there is a Firefox bug for when an element isn't visible - I wonder if that's what's happening here. I'm trying to find out what exactly is happening so I can fix it.

 

The idea of this project is to funnel users into their appropriate usage category. Each question displays an animation and asks a question. The first animation runs, but when I try to click 'Get Started' the JS is blocked, so I can't click to the next question.

I've attached the codepen for reference. If anyone could shed some light on this, I would so appreciate it. 

Thanks!

See the Pen oEYooG by anon (@anon) on CodePen

[GreenSock 8,117 Likes (Superhero)]

Yep, Firefox won't report measurements on invisible SVG elements (like display:none). So definitely avoid that (it's a browser issue, unrelated to GSAP). It's better to use visibility:hidden or opacity:0. 

 

I noticed a few other odd things:

1. You weren't declaring some variables properly (no "var"). Firefox complained.
2. There was a "display:absolute" (I think you meant "position:absolute")
3. You've got transition CSS properties defined on some elements - be careful about that because those can interfere with GSAP animations. 

I hope that helps.