NS_ERROR_FAILURE with TweenMax

[Bratua]

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?  

[Sahil]

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

[Bratua]

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

[OSUblake]

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

[Bratua]

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

[OSUblake]

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.

[Jonathan]

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!

[Bratua]

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

[Jonathan]

@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

[Bratua]

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.

[Bratua]

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

[Jonathan]

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

 

[Bratua]

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

[Jonathan]

@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

[Bratua]

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

[Jonathan]

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.