Animation beginner

[Ljanmi]

Hi guys, just to check is the direction I am taking the right one. 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. http://codepen.io/Ljanmi/pen/WbyLWv

[Paulie_D]

It’s not clear to me what you are trying to do.

I get that the lines should animate somehow…although I think you could do this with stroke-dasharray.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray

If you could explain in greater detail what you are after we might be able to offer suggestions.

[Ljanmi]

Well, 4 lines forming an element in which I will animate company logo(letters). I used JS greensock GSAP to animate SVG in a way I descibed in a first post. I am not very experienced, there might be better ways to do it. Would like to hear opinions about it… Any help is most welcome :)

[Paulie_D]

So you’re happy with the way it looks but you want advice or discussion on the way you’ve gone about it… Right?

[Ljanmi]

Well basically yes, since I am an amateur in trying and here gathers the PRO’s. Sooo… :)

I used this JS library – http://greensock.com/

[Shikkediel]

It seems to be working well but in general one wouldn’t need a huge plugin for this. Here’s an example using only some basic jQuery :

http://codepen.io/Shikkediel/pen/wBwVVJ?editors=011

Animating stroke-dashoffset, same as Paulie_D mentioned.

[Ljanmi]

Well I have a company logo that I want to animate in a very cool way, check the photo. I will animate after some lights half broken to do the trick ;) I am wandering is my aproach of animating with SVG the right path to go or there is more simple and natural way. I explained my tehnique in first post. Thanks for reading and showing interest. http://s17.postimg.org/u2jt7gvn3/0ee6502ad55123dc96d404a07bb947bb9446c91bbfa8e6f7.jpg

Update:

Just don’t want to continue animating and waste time if my aproach is primitive :)

[Shikkediel]

I will animate after some lights half broken

Not sure what that means but I do like this kind of animation a lot. That logo seems doable with the same technique. It could actually be achieved with even less JS – using CSS transitions. But the advantage of the pen above is that it’ll work in IE9 as well.

For doing a lot of animation, this library (GSAP) is very convenient.

[Paulie_D]

I think the lights half broken means like a blinky neon sign.

Actually I think that’s been a little overdone but whatever you like.

[Shikkediel]

Okay, I like some tranquility of design myself too but as long as it appeals to the target audience…

http://www.lingscars.com/

[Ljanmi]

Yes blinky neon signs but I will not over do it. Lets see how it
looks like first if too much I’ll remove it then.
But nobody comments the approach, rectangle in Illustrator without strokes or fills and on top of that rectangle the same one pasted on the exact spot(coordinates whatever :) – Ctrl + Shift + V) who’s paths I broke into lines that I used to manipulate position(x,y) and when done positioning of the lines I filled the strokeless rectangle underneath it.
I will continue animating but was afraid that I was doing the primitive way…

Update:

I was looking forward doing only CSS animation but it doesn’t work in IE. Here is a another element that I plan to implement on the one page website – it will tell people that we accept certain credit cards(it is not done yet) – http://codepen.io/Ljanmi/pen/KweyOj
I abandoned that approach because of IE support drop and went for GSAP.

[Shikkediel]

That approach (without regarding the exact manner in which it’s achieved) seems fine to me.

… CSS animation but it doesn’t work in IE.

You must be talking about SMIL. Normal CSS3 animation should work fine from IE10 on.

[Ljanmi]

Thanks for approving my approach, IE has all support for CSS3 animations as far as I remember but SVG draw from some reason just doesn’t work, there is not a single example where u can see that CSS3 SVG draw works in any IE even IE11. I think that all other CSS3 animations work except this one. I read today news, Microsoft is abandoning IE heritage definitely with win 10 and the new name for MS internet browser will most likely be Spartan with all the latest goodies(newest tech and latest standards).

I am a big fan of SVG generally and animations as well, any suggestion and critic of the approach is most welcome.

[Shikkediel]

They’ve been pretty compliant with ‘modernity’ since IE9, really. But it’ll be interesting to see what’s new (let’s hope Web Audio API support at least). If by SVG draw you mean line drawing animation, I think that IE actually approaches it more correctly than other browsers. The reason that it often won’t work is because unlike the others, you cannot override a value with CSS if it was originally defined inside an attribute.

Edit :

IE actually approaches it more correctly

Or do they…

SVG content that uses the presentation attributes is highly compatible with supplemental styling by adding CSS style rules to override some of the presentation attributes.

http://www.w3.org/TR/SVG/styling.html

[Shikkediel]

The above might be only half sensical since I can’t recreate the example. But the crux was definitely in IE handling SVGs a bit different rather than being unable to animate…

Anyway, never hurts to know your way around a library like GSAP.

[Author]

Posts