Jump to content
GreenSock

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

NS_ERROR_FAILURE with TweenMax

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

Hey everyone. I am building a website using a drag and drop menu where a new page is opened when an element is dragged and dropped on one of the menu pages icon. It's been working alright for a while until today. It just takes me to the new page but page content doesn't load. This happens only in firefox. Everything works perfectly on all other browsers. I keep getting this error on firefox - NS_ERROR_FAILURE: TweenMax.min.js:15. I'm confused as at this point , I don't know how to move forward. Can someone help?  

Link to comment
Share on other sites

What version of TweenMax are you using? It usually shows this error in FireFox when you are using old version of TweenMax.

Link to comment
Share on other sites

@Sahil I don't know if it's the latest version but I downloaded this version on November 9th. Don't know if that's the latest.

Link to comment
Share on other sites

There's a 100% chance that you're setting display to none on something, or messing with something that can't be rendered, like an element inside <defs>.

  • Like 1
Link to comment
Share on other sites

@OSUblake Thanks for the input but I never use display: in my code. Just visibility. But then again all these work fine on all browsers just Firefox. Also I might add that the URL changes to the new page but no content is loaded on to the page, just blank.  

Link to comment
Share on other sites

Yep. That's what happens in Firefox when something can't be rendered. Make sure the loading is complete before setting up any animation stuff.

  • Like 1
Link to comment
Share on other sites

Hello @Kingsley88 and Welcome to the GreenSock Forum!

 

Yes like @OSUblake advised. This happens in Firefox with the following:

  • having an SVG child element that uses display none
  • trying to animate elements inside a SVG <defs> or <symbol> element

You must use either the CSS visibility property or the SVG visibility attribute. In SVG any graphical element that is display none or inside a <defs> or <symbol> element will not directly be rendered and will be removed from the render tree.

 

https://greensock.com/forums/topic/13681-svg-gotchas/?do=findComment&comment=57408

 

Happy tweening!

  • Like 3
Link to comment
Share on other sites

@OSUblake And how do you suggest I go about that if you don't mind? @Jonathan Like I said earlier, I didn't use display. What I did do however was set my svg to hidden with css and used tweenmax to set it to visible to avoid flickering. That's about what I did in terms of display and nothing else.  Plus I am animating just svg paths. They are not in <defs> or <symbol>. And these elements don't animate on page load. Their animations are triggered. So I have no idea.

Link to comment
Share on other sites

@Kingsley88, If you are not using <defs> or <symbol> elements or you are not using display none, then you need to provide a limited codepen showing your issue. Since there is no way we can debug or know whats going on without seeing your code in context.

 

Please create a codepen if you would like us to help you with your issue:

 

 

Thanks :)

  • Like 1
Link to comment
Share on other sites

I just discovered that the issue is that the page transition isn't playing. When removed the page loads as normal. Now I have to figure out how to make it play in firefox. Any ideas? it's an animated <div> by the way. Not an svg.

Link to comment
Share on other sites

All the animations done using tweenMax don't play in the pages. not just the transition.

Link to comment
Share on other sites

@Kingsley88 .. We still need to see your code for context! There is no way we can know anything that is happening in your code that we can't see or can't test in  a live editable environment.

 

This is my 2nd attempt on asking for a code example. So please create a codepen demo example if you would like us to help you and offer proper solutions. Otherwise we will be shooting blanks!

 

:)

  • Like 1
  • Haha 1
Link to comment
Share on other sites

@Jonathan Thank you for taking the time but my code is extremely large at this point with many GSAP files. I wouldn't know how to go about recreating the issue in codepen. 

Link to comment
Share on other sites

@Kingsley88 .. Then just separate your code to just the GSAP parts that are causing your issues. It just needs to be a reduced codepen example with a couple of tweens showing your issue. Chances are there is something in there that is the culprit, but we just need to see the GSAP parts so we can recreate this to solve your issue :)

  • Like 3
Link to comment
Share on other sites

@Jonathan Would you mind if I shared the link to the github project so you can take a look for yourself? The project has many scripts that I can't seem to load in codepen. It will be of immense help.

Link to comment
Share on other sites

Yes you can share your link to the github project. Just keep in mind we cant guarantee that we will find your issue without seeing you isolate your issue with live edits in the browser. 

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.

×