Wow, I'm really surprised at the comments so far.<p>For the Geocities comparison commenters... My takeaway was not "Here are animated icons, you should litter all your pages with them" but rather "Here are animated icons, if you have a use case for them, then these are a very good option".<p>For the too-much-animation commenters... Are you actually surprised that the demo page stuffs a lot of icons into a page in order to demonstrate the range of capabilities? See above -- the intent is that designers should use them sparingly and appropriately. Is animation necessary? Probably not. Can it be engaging if the execution is good? Without a doubt.<p>These are very nice-looking icons that appear to offer quite a bit of flexibility. I think that they will seem more natural in contexts where lightweight animations (drop shadows, spinners, etc.) are already used: alerting a user to an available interactive element, on hover as a user prepares to perform an action, during a wait period while processing occurs, or drawing attention to a completed action.<p>Many of these are pretty subtle or clever animations. If you can get past the notion that "no one in the world can use animated icons well", you might realize that these could be used in moderation to add a hint of whimsy to a site.
Sorry in advance for being negative, it's not these particular buttons that are problematic, they're technically very nice, its animated icons/buttons/logos in general that I think we should consider visually upsetting. Here is my reasoning:<p>The genius of gradients and shadows in design is that they allow for objects to appear 3D, that is, they can visually "pop" off the flat page and therefore draw the users' attention to them. This is good unless every element on the page has shadows and gradients, then it becomes very pretty but very distracting.<p>When I'm on a website, I'm not appreciating a colorful Monet, I'm trying to <i>always</i> do <i>essentially</i> one of two things: Find the right thing to click so that I no longer need to be on that website, or else read text. (or look at photos, etc.) Being a pretty site is a huge plus, but not if it distracts from one of those two goals.<p>The genius of Flat UI that has recently (re-)exploded in popularity is not to draw attention to specific elements, but to ease the experience by doing the opposite: it <i>un-distracts</i> by removing all this popping stuff.<p>And I love Flat UI for this. I can see clearly now, the bevel and embossed rain is gone.<p>Alas these icons are about as distracting as you can get. Many of them resemble a <i>flat UI style</i>, but they've missed the point of Flat UI entirely. It's not that I dislike gradients, its that I don't want to be distracted in my journey to find the one button I need to click and then get off the page.<p>I understand that they're examples of what you could do, but I do hope hey're something no site author would <i>want</i> to do. No user ever has had the thought, "Before I click a button, I really wish it would wabble back and forth."<p>(And if I'm there to read text, I sure don't want anything animating while I'm reading!)<p>~~~<p>I don't mean to be totally harsh on animations. They can be useful when you need to create affordances. Buttons that highlight as you mouse-over them afford clicking, just like the visual of knobs (say on a car dash board) in real life afford turning. An icon that flies away as I hover over it, or significantly changes shape as I hover over it is probably not a good choice for nearly any button.
I'm not sure why the comments are so negative. There are definitely huge problems that can crop up when using animated icons. I don't think the author is advocating that anyone animate every icon on their site like they did on this example landing page.<p>That being said, the problem I have with this is that a lot of the animations aren't very good. For example the "user" icon animates by the user's head barely moving. That doesn't mean anything. It's just pure distraction. It's animating for the sake of animating, not for the sake of explaining.
Regardless of what others have said, I think using these in special circumstances is perfect. They are quirky, fun, and well designed. I look forward to using them in a fun design in the future.<p>My favorites are (1) Upload, (2) Chrome, (3) Android, (4) and the Spinners. Thank you very much!
This is the Geocities of vector art. I don't see this as a good thing, I see this as a poor compensation for bad interface design. If your icon <i>needs</i> animation for it to make sense to your visitor you're doing it wrong.
A little bit of movement can be nice, but this is really overdoing it on almost every icon. The animations here go so fast, it's only distracting you from the main message of the button/CTA/promo.<p>Less is more.
I feel like some of the icons (PayPal and WordPress in particular) are animated for the sake of being animated.<p>overall, I feel that making every little button wiggle when I mouse over it would be distracting rather than helpful. I can't see myself using these.
Our app WebCode (<a href="http://www.webcodeapp.com" rel="nofollow">http://www.webcodeapp.com</a>) makes creating Canvas-based graphics like these much easier. It is a vector drawing app that instantly generates JavaScript Canvas code.
On the demo site(<a href="http://codecanyon.net/item/livicons-303-truly-animated-vector-icons/full_screen_preview/4618985" rel="nofollow">http://codecanyon.net/item/livicons-303-truly-animated-vecto...</a>), some of the icons don't have any animation as far as I can tell from my browser (Chrome on MacOSX). Is it just me?
Neat idea, but I dont like the concept. The animations instinctively make me think some action is occurring, which isn't.<p>I think those would be better served to indicate the processing of an action, like the pin wheel/hour glass of old.
To me this feels like a return to classic geocities design.<p><a href="http://www.textfiles.com/underconstruction/" rel="nofollow">http://www.textfiles.com/underconstruction/</a>
<a href="http://www.bellsnwhistles.com/page29.html" rel="nofollow">http://www.bellsnwhistles.com/page29.html</a>
<a href="http://www.11points.com/Web-Tech/11_Best_Old_School_Animated_GIFs" rel="nofollow">http://www.11points.com/Web-Tech/11_Best_Old_School_Animated...</a>
I've been mulling over these kind of animated icons after seeing the little weather icons on <a href="http://forcast.io" rel="nofollow">http://forcast.io</a>.
Seems like it would be extra neat to make this a webfont somehow (swapping out 'frames' of font-data under the font name alias). However pretty unnecessary, considering the LiveIcon perks of using data attributes to specify loops, etc.
You could two things to improve this. Allow cutomization of speed (the icons move too fast), and let one icon morph into another. This could become a visual cue for further navigation or a preview of the steps that follow a user sequence. On its own, a moving icon doesn't carry much value in a layout.
Edited for grammar.
I like the technical idea of these items, but in reality they don't really provide any added usability. In fact, I would say they take away from a message more than a standard icon. The idea of an icon is to instantly convey a message. Adding an animation to said message on hover doesn't really add any extra 'reason'
Nearly all the examples on that page seem to be distracting and not needed. I can't think of many uses where this would be overly useful or helpful to a user.<p>Reminds me of when we used animated GIFs everywhere and construction men explaining how the site is still under construction...
An animated icon only makes sense when it represents the progress of a 'long running' command, such as reload or send. In this case it affords recognition that something is happening. Anywhere else this is a terrible ui decision.
I think it has potential but it needs to be quite a bit more subtle. It seems too distracting the way it is right now. I find myself trying to just keep track of the animations and not really appreciating the attention to detail.
Do they affect page performance / drain battery faster?<p>I'd like to see some comparison between static and animated icons, but not sure how to profile it.
Measure FPS, or cpu time for rendering a page, perhaps?