Animation beginner

[Ljanmi]

GSAP gives me so precise timing and control over the animation, we will agree that timing in animation is most important. So, I find it much more usable and superior in creating complex animation then CSS3. https://www.youtube.com/watch?v=QO1mLs96krY&list=PLWa_eM6lXfKmbzl6IXq39qj8NEEX3itRy

I really would like to see any working example of CSS3 SVG draw inline animation. I have spent some serious time searching for that example without results.

I am a big fan of animations generally and I have really special interest in SVG since I see as a thing of the future in HTML.

Does anybody knows how can I make the lines start form the edges of the screen when animating, I probably lack some knowledge. Seems to be related to the viewbox and new background property size of the SVG although it shouldn’t be…
http://codepen.io/Ljanmi/pen/WbyLWv

Update:
IE11 workes fine(lines start form edges of the screen) but Mozilla and Chrome are bound to the viewbox and new background size property of the SVG so the lines are not animated the way I would like to…

[Paulie_D]

IE11 workes fine(lines start form edges of the screen) but Mozilla and Chrome are bound to the viewbox and new background size property of the SVG so the lines are not animated the way I would like to…

There are issues in the way each broswer interprets the ‘box’

https://css-tricks.com/svg-animation-on-css-transforms/

[Ljanmi]

I read in detail article and all its comments but I don’t find solution. I also read it few days ago but anyway I read it again like many others on CSS tricks(such a good place to learn :) ) Anyway I added oncomplete repeat function to JS so you can more easily see whats going on in different browsers.

There must be some easy work around for line start at the edge of the screen in all browsers :(

[Ljanmi]

I apologize, it is not related to the viewbox size and new background size property. However it does got to do something with the artboard size when I create the SVG in Illustrator.

[Ljanmi]

I apologize one more time, I don’t have a clue whats going on and to what property the problem is related to… :(

PS
Was trying to find the solution for several hours without any result :(

[Ljanmi]

This is the only “progress” so far. In Chrome and Mozilla(IE11 is fine and acts normal) if in Illustrator I set Object>Artboards>Fit To Artwork Bounds(minimazing Artboard size which I usually do when creating or editing SVG) I get this result(even worse) – http://codepen.io/Ljanmi/pen/yyqVqz

That’s why I thought that it’s got to do something with the Artboard size but increasing the Artboard size in Illustrator and making the object smaller comparing to Artboard didn’t bring results. I mean it did but only to certain point which you can see here on the first example – http://codepen.io/Ljanmi/pen/WbyLWv

I just couldn’t make the line start @begining of the screen :(

[Shikkediel]

Have a look at the parent div #test, the fact that it’s dimensions are set to 50% is influencing things as well…

[Ljanmi]

Thanks Shikkediel, I played with size properties, I excluded responsive design settings, brought back height and width properties to SVG tried this and that but nothing seems to work. I give up.

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.

Hopefully, there will be some new ideas…

[Ljanmi]

http://stackoverflow.com/users/109374/erik-dahlstr%C3%B6m 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!!!

[Author]

Posts