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?

Actually nothing fancy at all. http://codepen.io/LilaQ/pen/dPMjyg This codepen here shows what I'm trying to accomplish (but with tweening back to the original width). Like you said, the reversing of a Timeline would work, I just want to additionally flip all the characters around 360 on the way back to its original position with the SplitTextPlugin. Edit: Sorry, the pen was not saved. It is now. Edit the 2nd: Of course if someone has an idea on how to accomplish my idea in any other way, I'm all ears. A have a div with a fixed with, a menu item inside (just text) on the left side of it. On hovering with the mouse, the text shall move to the right border of the parent div (at the moment accomplished with tweening the width to 100% and text-align: right), when the mouse leaves the object the text shall tween back to the left side of the parent div (with a little rotation of the characters).

This should be exactly what I am looking for. Thanks!

Tweening to auto width does not work unfortunately (it just snaps back to the the desired width immediately), I'm not quite sure why: http://codepen.io/LilaQ/pen/dPMjyg @Rodrigo: Your solution should be working, but I need to apply additional tweens on the "way back" to the original size :/

Hi guys, sorry for creating to many topics at the moment - it's just I know that I get the best help around here and I'm really trying to get some work done at the moment. My question: I have a <div> which is displayed as an inline-block, thus having a variable width (only wrapping around its content). At one point I want to tween the div to 100% width of its parent element (childsplay with GSAP). But after that, I want to remove the 100% value and tween it back to its original width and behaviour. How can I accomplish that? Thanks in advance, also for your patience with these, I'm pretty sure, easy questions. Best regards,

Hi guys, yesterday I successfully converted part of my companys logo to a SVG and let it draw with the new, awesome DrawSVGPlugin - works great and it's so fast to accomplish! Now I have a customer who is the owner of a tattoo shop - my idea was to animate his logo (handwriting of the name of the studio) as an SVG. What would be really cool if I could lay over an image of a brush, pen, tattoo machine, which follows the current draw process of the plugin. Is that possible? Is there a way to get the current coordinates in an update-callback or something? Thanks in advance! Best regards,

Is this still the way to go? Or is there an improved way to tween a filter like the blur filter?

I stumbled across the SVG Plugin a few days ago and was absolutely astonished, that was exactly what I was looking for one day earlier. At this moment I am experimenting with it Thanks a lot for the continuous development and optimizing!

I cleaned and finished the script (had some synchronizing issues with the minute- & hour-change), works flawlessly now from what I observed. I made a CodePen for anyone who is interested http://codepen.io/LilaQ/pen/dPMZBP

A w e s o m e ! Thank you so very much! The business license was SO well spent money, you guys deserve every single cent of it! Thanks, means a lot to me!

Hi Diaco.AW thanks! The first issue is solved But the second one still exists, when I let the script run for 1-2 minutes, you can see that the box for the seconds is kinda crooked and did not rotate in full 90 degrees steps. It may very well be that it is my code / logic that is the problem here, but I can not seem to find the culprit. Edit: It seems the Tween sometimes gets called while it's still tweening, thus adding 90 degrees to the current rotation value, which leads to the obscure final rotation value. But I'm confused why it would get called while tweening, the Timeout only runs once a second... Any ideas?