Animation beginner

[Ljanmi]

  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

[Ljanmi]

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

[Rodrigo]

Hi,
 
I haven't worked too much with SVG, so I don't know of a better way to do this. It seems ok to me the way you're using right now though.
 
The only tip I could give you is to play a little with the timeline's instances position parameter. Some times a little change here and there can change the way an effect is perceived. For example a little overlap between the lines' animations and a little delay for the fill:

function animate() {
var tl = new TimelineLite();
tl.from(".line1", 0.3, {x:-3000, ease: Power0.easeNone}, "-=0.075")
tl.from(".line2", 0.3, {opacity:0, x:3000, ease: Power0.easeNone}, "-=0.075")
tl.from(".line3", 0.3, {opacity:0, y:-3000, ease: Power0.easeNone}, "-=0.075")
tl.from(".line4", 0.3, {opacity:0, y:3000, ease: Power0.easeNone}, "-=0.075")
tl.from(".fill", 0.7, {opacity:0,  onComplete:animate}, "+=0.2");
}
animate();

Happy Tweening!!

[Ljanmi]

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.

[Ljanmi]

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!!!