Skybox Dev

Forgot to monitor this threat. It appears white-spaces are evil for svg's. The svg's we use come straight out of Illustrator CC so I'm not sure if it is Illustrator or an incorrect setting. I ended up with something similar, thanks!

Figured it out, the ending space seems to be causing problems here.

Well everything appears to animate correctly except for the polygon. Which has the 0 position in the negative. Any thoughts on why this might happen? Updated the pen: http://codepen.io/mrksmts/pen/QwRroy

No, the whitespace removal works like a charm, as far as I could test it for now. What I ment was that when you don't do anything with the SVG the SVG just renders correctly even with the extra white spaces and new lines. When you apply a tween to it like animate from 0 to 100% then the start/end points get shifted like in the first example. We've build something similar before the SVGplugin existed with only paths and using the getTotalLength method. The behaviour the original SVG now gave with the plugin looked similar to when the getTotalLength method for paths gave a wrong value (like sometimes happens in Firefox) that's why I assumed the polylines use something similar. Since the plugin makes life a lot easier we decided to migrate our code. This is a snippet of what I've used before using the plugin to set all the paths before animating them. var paths = document.querySelectorAll('path'); for (var i = 0, l = paths.length; i < l; i++) { var path = paths[i]; var pl = path.getTotalLength(); path.setAttribute('data-pathlength', pl); TweenMax.set(path, {strokeDashoffset: pl, strokeDasharray: pl + " " + pl }); };

Hi OSUblake, It seems to be a whitespace issue indeed. When looking in the inspector it shows three spaces instead of one due to the extra lines/whitespaces Illustrator adds. The SVG renders correctly but the get total length seems to be incorrect. Might be a nice improvement for the SVGplugin itself, normalizing the SVG points? Thanks for the snippet, we'll use that for now.

Hi, This issue has been bugging me for the past few hours, but I've managed to point it down to the new lines Illustrator adds to SVG files when there are a lot of points and the lines become too long. Maybe it's an option I've been overlooking and I can turn this behaviour off, anyhow these new lines Illustrator adds on points changes the start/ending positions on SVG paths. I've added a codepen, the SVG file gets injected on the place of the img tag with an modified version of SVG Injector (https://github.com/iconic/SVGInjector) I'm not sure if this is a GSAP problem or a bug in Chrome. But it might be worth looking into. Kind regards, Mark