FireFox and NS_Error_Failure... with example

[danboyle8637 12 Likes (Newbie)]

So I've read the other posts in the forum about how FireFox throws this NS_Error_Failure when an SVG is not mounted in the DOM... as I understand it, either with a display of none or visibility of 0. 

 

I'm building in React and I think I've isolated which SVG animation is giving me problems.

 

I copied it to a codesandbox and it works on initial load. But if I refresh the codesandbox, I'll start to get it a lot.

 

I'm not sure why. I don't mess with display or visibility. I do a lot of transforms.

 

In my actual site, I use ScrollMagic but because I can replicate the error with this, I don't think that's the problem.

 

Here's the link to the CodeSandbox just in case: https://codesandbox.io/s/dazzling-keller-r2p6g?fontsize=14

 

 

See the Pen by s (@s) on CodePen

[Jonathan 5,176 Likes (Superhero)]

Hello @danboyle8637 and welcome to the GreenSock Forum!

 

Looks like your not waiting until your elements are ready in React. codesandbox  probably has issues when reloading iframes which is what makes up those view panels in codesandbox .

 

You might want to make sure you run your GSAP code once the DOM is fully ready. 

 

In vanilla javascript it is the DOMContentLoaded event, in jQuery its the ready() event.

 

In React it is the componentDidMount and componentDidUpdate event listeners.

 

This way you know the DOM has all your elements loaded and ready before trying to have GSAP access them.

 

Happy tweening!

 

 

[danboyle8637 12 Likes (Newbie)]

@Jonathan Thanks. The useEffrect() method in the SVG component is the same - or is supposed to be - the same as componentDidMount() in a class based component.

 

The helper functions I have in my component that create the animations are outside the useEffect() but I've put them in the useEffect() and I still get the Error. 

 

I'm not sure what's going on. If anybody else has info that would be great.

 

I guess I'm just going to convert all of my animation components to class based components and see what happens.