LilaQ

I have to extend this question... This may probably be the same issue that I already posted here: http://greensock.com/forums/topic/11066-drawsvg-queue-inset-paths/ With your solution the paths animate to the correct duration, but now when I want to fill them, everything is filled. For example the globe on the left, the parts inside are supposed to be transparent, only the area between them is supposed to be filled. This works as expected with all the sub-paths in a single path-Element. How can that be achieved? Thanks in advance guys, you are awesome!

Awesome, thanks for the clarification!

Hi guys, I just noticed that DrawSVG runs for different durations with different SVGs, at least in my current case. I made a CodePen with the issue: http://codepen.io/LilaQ/pen/yyJMGZ TweenMax.fromTo($(".svg-symbol"), 42, {drawSVG: "0%"}, {drawSVG: "true"}); From this line I would expect all three SVGs to take 42 seconds to be completely drawn. But the first one is the quickest, the second one the second quickest and the third one takes about the 42 expected seconds (did not stop it). Originally it was set to 2 seconds, but then you virtually can not see the first one being drawn at all. Any help, once again, greatly appreciated! Best regards,

I just checked the W3 Docs and fiddled around with the 2 objects, there is no way to overwrite the bottom elements colored fill with the top elements transparent fill, so I guess this is a dead end. Only other way I would see is a non-minified version of the DrawSVGPlugin and modifiy it to tween multiple lines in a single path-object consecutively. Any hints, ideas etc.?

Very neat!

If I fill the inner like you said, wouldn't that just show the color of the outer path? Since it lays over the outer path-object?! Please correct me if I'm wrong.

First of all, sorry I'm replying so late. @Carl that looks great and I really love how you worked this out. I will have a deeper look at this and learn from it. Thank you very much for the time and effort you guys put into other peoples issues and questions! Best wishes,

Hey guys, I hope I can get this across since english isn't my native language. I have a SVG-Logo which consists of several letters which have inset paths (like the "O", outside path, and inside path). Is there a way I can queue the inset paths to be drawn after the outside paths, and still be able to fill the whole letter? I tried to exclude the inset path to its own <path> element - this way I can draw the paths one after another. But I guess now I won't be able to fill the area between the outer and the inner path, only the area inside the inner path which is supposed to be transparent. I made a CodePen of it (without the actual images, I don't know how to import local images into a CodePen yet; the background is a close-up of human skin, the red box is actually an arm / hand holding a tattoo machine) http://codepen.io/LilaQ/pen/emzdwq Thanks in advance, you guys always find a way, I really love the forums here <3 Best regards,

Thank you, once again, Rodrigo!

Hi guys, I just wanted to make a CodePen with the DrawSVGPlugin, but I couldn't find a CodePen Starter Pack, has it yet to be done? Thanks in advance! Best regards,

I took a shot at it, but the result is anything but satifying: http://codepen.io/LilaQ/pen/dPMqLv Any more ideas? :/

This is actually intentional, I want the characters to be spread apart through the padding, until the first character hits the left border (which is the end of the width tween), and then tween back to padding 0. It's supposed to look like the caracters are behaving like connected with springs. Any ideas on how to achieve this? I had a few ideas while trying to sleep, like: creating a clone of the div (with display:none), including the characters with a set padding of 20px measure the width of that div (is that even possible when not displayed?) then tween to original div to that measured width on mouseleaves (which then should be enough to not break lines) once the padding-tween is done, remove the measured width Now that I think about it again, this won't work b/c I have a text-align: right and this would just snap the element back at the end... However, ANY help and ideas would be greatly appreciated. Thanks in advance!

Okay, sorry I have to mark it unanswered. The problem is following, if I try to add a padding as the effect for the tween back, it won't work, the inline-block div get's an inline width, which causes the characters to break down to the next line. I will make a CodePen to demonstrate right now. Edit: http://codepen.io/LilaQ/pen/wBGEOx Note how the "child" div has an inline width of ~15% after the Tween. Any way to make the characters not break in the next lines until their padding 30px -> padding 0px is done?

That's what crossed my mind, too. Well, thing is, there WAS a solution - as you said, not terribly complicated - so, all is good

Awesome, love it, thanks! Although pretty complicated for a "simple" 100%->auto Tween... (not criticizing your solution here) Any chance for GSAP to cover this, maybe in the future?