Jump to content
GreenSock

zozo

Draw svg Issue with 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

Hi every one, 

 

I have an issue with draw svg on Firefox. 

It's pretty weird, on my website, the animation work, but not until the end, and then I have an error : TypeError: e is undefined and it loop with that error. 

On the code pen, it doesn't work at all. 

But it work fine chrome and safari. 

Thanks for the help. 

 

Best

 

See the Pen pZXVWw by romainmalauzat (@romainmalauzat) on CodePen

Link to comment
Share on other sites

Hello @zozo and welcome to the GreenSock Forum!

 

The issue your seeing is happening because id #mask9 is a <line> element.

 

It looks like your <line> element (#mask9) for the letter i, is causing this error to be thrown. You can see when i comment out the SVG <line> element (#mask9) and the from() tween for #mask9. The animation does not throw that error.

 

I will shoot a message to the Mighty @Carl and Jack @GreenSock and see if they can see why that happens with that <line> element.

 

See the Pen GBbGrW?editors=1010 by jonathan (@jonathan) on CodePen

 

Please standby :)

  • Like 4
Link to comment
Share on other sites

The mighty @Jonathan beat me to it, but I just came to the same conclusion. For some reason the line is throwing an error in FF when it is in a mask. Outside of a mask (or clip-path) it draws fine. Here's the project stripped down to just the problem line and mask.

 

See the Pen NBZBxo by PointC (@PointC) on CodePen

I'm not quite sure what's happening there either. 

  • Like 5
Link to comment
Share on other sites

I was on it too.

 

It is because firefox doesn't report measurement when we use getBBox method on hidden elements or in this case line inside the mask. And GSAP uses getBBox because it is not path, so you should convert your line to a path.

 

PS: Yup I have started digging into files, seems fun.

  • Like 4
Link to comment
Share on other sites

ahhh... that's right. This has come up before and I forgot all about it. Nice one @Sahil. :)

 

  • Like 1
Link to comment
Share on other sites

Wha, this is great !

I guess I could just change the line element to a path and it would work, but it's great to see every one so reactive and passionate to make tweenmax perfect !

You guys are awesome !

  • Like 2
Link to comment
Share on other sites

Great work Jonathan, Sahil, and Craig!

 

@zozo, since you are Shockingly Green you can save yourself some trouble. If you load MorphSVGPlugin you can use its convertToPath() method to fix all those lines.

 

MorphSVGPlugin.convertToPath("line");

 

test this in FireFox: 

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

 

  • Like 3
Link to comment
Share on other sites

Thanks a lot guys ! Carl solution worked for me, I will give Jack solution a try tomorrow !

 

  • Like 1
Link to comment
Share on other sites

Pretty sweet Jack. I just dropped it into a couple test pens and it works perfectly in FF. ?

  • Like 1
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.
×