Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by 48DESIGN

  1. Hey guys,


    I just stumpled upon a problem that only occured in FireFox, giving me the very unspecific error message "NS_ERROR_FAILURE" when animating an SVG. In Chrome, it worked without a problem.

    After spending quite some time trying to find what's wrong, it turned out that there was an element that was hidden via display="none" for testing purposes but that was still being animated with GSAP. I created a simplistic test case, see the Codepen.


    In the uncompressed TweenMax.js, it's in line 3000:

    b = e.getBBox();

    It's not a big issue now that I found out what was going on, but maybe this is something that GSAP could check and then just ignore the animation if the element is not visible anyway, to prevent others to run into this in the future.

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

  2. Here's an update: Mozilla devs feel they are following the specs, so the other browsers are behaving wrong. I'm not taking on the hassle of either getting the spec changed or filing bug reports with several other vendors, but rather live with yet another browser inconsistency.


    Thanks to your fix, that won't be a problem, and you might consider including it in a future update.

  3. Thanks so much for taking the time for an evaluation! I will try merging the x/y and transform - if that works, maybe I can automate it with a script.

    I will also file a bug report with Mozilla, but I will await your final response on this matter first.



  4. Hi everybody,


    I'm trying to animate an SVG (that I didn't create) for client project. It works well in Chrome and even Internet Explorer (9-11), however, I'm running into trouble with Firefox. The y positioning of the elements is completely incorrect, some parts move up instead of down and parts that should visually "stick" together end up shifted.



    Interestingly, I found out that if I use "yPercent:" instead of "y:" and adjust the values accordingly, the animation works as intended throughout all browsers. Take a look at this modified codepen:


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


    I don't feel comfortable using yPercent. On the one hand, it's not "semantically" correct in my view, because I actually don't need and don't want to rely on the elements' heights for just moving them around. And on the other hand, if I want to move two elements around that visually represent the back and front side of one single object, I have to find the correct percentage values for each of them, which doubles my work. (I should add that I will have to animate several similiar SVGs for the project.)


    I'm aware of the fact that the SVG could be cleaner (e.g. not using <use>, the various transforms and the viewBox attributes on the symbols...), but I want to avoid having to clean up and effectively rebuild every single SVG file. And apart from that, I would really like to know what causes these browser inconsistencies that GSAP isn't able to compensate and would be glad if anyone could come up with a way to fix it.


    Thanks in advance for any help


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