Jump to content
GreenSock

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

FireFox and NS_Error_Failure... with example

Recommended Posts

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

Link to comment
Share on other sites

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! :)

 

 

  • Like 3
Link to comment
Share on other sites

@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.

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.
×