[Animation beginner]

Erik Dahlström @stackoverflow.com did it. 

 

 

Add svg { overflow: visible } and it should work the same in all browsers (longer explanation below). If you want to see why the lines get clipped, add borders to the svg element.

Another way is to make sure the size of the svg matches what you want, e.g by using css.

All browsers except IE implemented hidden as the initial value for the overflow property for the <svg> element, as called for by the SVG 1.1 spec. SVG 2 has changed this for (outermost) inline svg elements, such that it requires what IE11 is currently doing. It will take some time before that gets changed in all browsers, so for now just add the overflow: visible rule and it should work correctly in all browsers.

Link - http://stackoverflow.com/questions/28852665/svg-animation-lines-erratic-behaviour

 

Finally, I can get back to animating :) So happy!!!

[Animation beginner]

Thanks Rodrigo, really appreciate your advice and will certainly play with your suggested animation timings settings. I got a major problem which I need to solve first. I just opened another topic on stackoverflow.com - http://stackoverflow.com/questions/28852665/svg-animation-lines-erratic-behaviour  . Seems like the problem got nothing to do with GSAP since it behaves the same when using CSS3 to animate(just tried that). Animation behaves the same way. It is probably connected with SVG structure itself or browser compatibility or both.

[Animation beginner]

I opened discussion here as well - https://css-tricks.com/forums/topic/animation-beginner/page/2/#post-197198

[Animation beginner]

  Hi guys, just to check is the direction I am taking the right one since this is not quite the question related directly with GSAP. I haven't seen this method of doing anywhere, so the idea is all mine. I created in Adobe Illustrator a rectangle without fill and stroke then copied another one and paste it on the same position over it and broke the path into lines which I was able to animate. Because I couldn't fill the lines inside I used the rectangle underneath to animate fill.    

 

 I will put some SVG text and animate it inside with draw SVG plugin for company logo. Now, could I have done this differently since this idea crossed my mind, I am a beginner and it might be primitive one Would like to lines start at the edge of the screen but somehow they are related to the SVG viewbox size and couldn't find solution.  

See the Pen WbyLWv by Ljanmi (@Ljanmi) on CodePen

[SVG draw inline animation]

Aha, I see, I needed to brake every line into separate path. Great, the main thing is that SVG inline draw can easily be done. Thanks Diaco.AW for such a fast reply. Excellent support here on Greensock    

[SVG draw inline animation]

@Carl 

 

I am sold    In the next couple of days I'll join the club. It is fantastic how it performs in IE which is the main reason I came to greensock. I read a lot about in in the artical on CSS tricks. Just one thing, in IE something is wrong with the VISA draw SVG size(a part of it is cut and doesn't show) - 

See the Pen PwaQGw?editors=011 by GreenSock (@GreenSock) on CodePen

 

Thanks Carl, you are the man!

[SVG draw inline animation]

Do I get a bit of help if needed for using it here on forum?

[SVG draw inline animation]

Ok, I just need to pay 50$ for Simply Green membership and Ill get the plugin to use it on my website? I need it for onetime use, so I guess I dont need commercial license? Membership is per year, what happens with my plugin and license of use after a year expires? Will I loose license to use SVG Draw plugin?

[SVG draw inline animation]

Hi, is it possible to make the same responsive animation using GSAP with plugin? 

See the Pen KweyOj by Ljanmi (@Ljanmi) on CodePen