Payman

Hi Dylan, you need to fix your id, because it's wrong: id="#Racket" should be: id="Racket"

Try using this.target instead: TweenMax.set(this.target, {padding: 100});

Great job, everything works perfect now!

Finally, I figured out what is going on. Here is the codepan - https://codepen.io/anon/pen/Ljxpjv Basically I am building a scene with dynamically loaded SVGs in a hidden div and then reveal the scene to a user. Apparently firefox fails to provide BBox from the hidden div. GSAP on the other hand mistakenly trying to get a BBox on a root SVG element when there is no need for it at all (I think).

Here is what I see so far: 1) TweenMax tries to parse transforms _getTransform 2) It checks whether it is SVG or not using _isSVG function 3) This is the code of this function, you can see it tries to use getBBox even though it might be a root svg element: return !!(_SVGElement && e.getCTM && _getBBox(e) && (!e.parentNode || e.ownerSVGElement)) 4) This results in triggering e.getBBox(), which ... fails! So it now goes to the _getBBoxHack and uses "this.ownerSVGElement" which is null and should not be used Here is the error of getBBox (note that svg does NOT have any "display:none;" style and svg .is(':visible') is true) After a quick googling I saw people getting this bbox error after inserting svg via ajax, so that's might be a root of the problem, I will check it later. Anyways I feel like _isSVG function's way of doing things looks pretty questionable to me. Let me know your thoughts! PS. Could you explain to me the meaning of this code? Thx! And why do you need to check getCTM twice in a row?: _SVGElement && e.getCTM

I don't think issue happens because of javascript, most likely it is the repaints and layout recalculations delay. I agree, doesn't make sense for me either why gsap decided to getBBox on a root element, I will take a deeper look into it, thanks for advice!

This is your Basic Starter Pen, I did not change any external javascript urls, so you might need to tweak it.

That's just the way firefox shortens it, you can see "..." in the middle. The svg is valid. Ok, no worries, we will just use a modified version. I spent hours trying to create a reduced version, but no luck. This issue appears only in a fully fledged huge application, which I can not disclose. The troubling code itself is extremely simple and similar to this - https://codepen.io/anon/pen/MvbzqB There is just a delay that appears after inserting an SVG and e.getBBox() becomes available, so TweenMax falls-back to using always null ownerSVGElement. And as more stuff happens on the page, more this delay, so I can't even predict how big of a delay I should use. Sometimes it goes up to several seconds for some reason, which is not acceptable for smooth animations. Again I won't bug you anymore with this, since I can't be helpful with replicating the issue. Thank you for you help anyways!

The fix is really easy guys. If the issue is possible in a heavy application, because firefox is not very reliable, I don't see why wouldn't you implement it : var svg = _createElement("svg", this.ownerSVGElement && this.ownerSVGElement.getAttribute("xmlns") || "http://www.w3.org/2000/svg"),

See for yourself, there is a parent and it's inside of the HTMLDocument. Do you have any other ideas what that could be?

I can't create a codepan as I don't understand why it's happening but firefox spits errors ownerSVGElement is null for some dynamically generated inline svgs, I can get all the parents of svg using jquery .parents(), but this thing is always null. Old versions don't have this issue, can you guys make some sort check if it is null - avoid using it? Really desperately need this fix.

ok will try, thank you.

I am not asking about an issue, just have a question if it is possible to pass initial coordinates without triggering any change in the inline style

I have a bunch of objects with inline style transforms (x,y,rotation) and gsap sometimes not picking up those transforms. So as a workaround I just use .set to let gsap know all the initial transform settings, however it triggers repaint and slows down everything a little bit because gsap replaces inline transforms with a matrix. Is there any way to let gsap know the initial coordinates and rotation, but not actually triggering repaint until any changes requested?

The id attribute specifies a unique id for an HTML element, you can't use same id for multiple elements. You need to use unique ids like #location1, #location2 etc. for each element and apply animations separately