Search the Community
Showing results for tags 'x/y'.
Found 1 result
-
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. http://codepen.io/anon/pen/zGMKPN 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: http://codepen.io/anon/pen/xGQEXr 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 Constantin
