8 ms·
Animated Vector Icons
- davefp 13y agoI feel like some of the icons (PayPal and WordPress in particular) are animated for the sake of being animated. 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.
- notjustanymike 13y agoI would treat this like a desert wine. You're not going to drink the whole bottle, but a small glass at the end of dinner is nice. You could do the same on an e-commerce site - work through the checkout process normally, and then make "Confirm purchase" button more fun to click.
- blktiger 13y agoI can see using these, but only sparingly. I don't think I'd use that preview eyeball. It's kind of creepy... :)
- fady 13y agoyeah, i kinda thought that same thing. these would be good to use for certain projects and in certain situations, but i don't think i would replace static icons with animated, ever.
- tlarkworthy 13y agoGood for distracting a user on a slow ajax day
- rpc_was_taken 13y agoMight be better to just animate them on click. Hover animations/color changes had some use for links, but a button shape already conveys "clickability". On the other hand, animating on click gives a nice feedback (how many times have I clicked a slow-responding link and wondered if I really did).
- ffn 13y agoOh wow, this is kind of fun. Might definitely use on some of my quirkier sites. Thanks OP
- PixelCut 13y agoOur app WebCode (http://www.webcodeapp.com http://www.webcodeapp.com) makes creating Canvas-based graphics like these much easier. It is a vector drawing app that instantly generates JavaScript Canvas code.
- trebor 13y agoThis 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 needs animation for it to make sense to your visitor you're doing it wrong.
- uptown 13y agoThat seems like a generalization. Surely there are instances where animation is appropriate for an interface. What's so wrong with another tool to achieve that goal with the added benefit of being entirely scaleable?
- jodrellblank 13y agoSurely there are instances where animation is appropriate for an interface. Not surely.
- uptown 13y agoWhy not? Say someone is designing a weather app where they want to show active snowfall - an animated vector icon showing falling snow communicates that perfectly.
- ryanac 13y agoDrag and drop. When I drag an icon to a location and I miss, I think it's better to see the item animate back to it's original location rather than just disappear and "pop" back. Having it animate back is just better communication for that particular interface. You can see this on Google Chromes new tab "Most Visited" page, drag an item and let it go on nothing, it will animate back to its position. Then there's sorting, it's much better (to me) when the interface animates to show you what the effect of moving one item to a new location will have on the rest of the items in that list, you can see this effect on sites like Trello when you drag around cards, etc. I'm sure there are more examples of good uses of animation in interfaces.
- trebor 13y agoAnimation is suitable in an interface, an icon does not constitute an interface. An icon on a button animating on rollover is just distracting. Now, perhaps if something had to go on in the background it would be relevant (indicating that the work is still in progress) but that's a very edge case.
- Breefield 13y agoI've been mulling over these kind of animated icons after seeing the little weather icons on http://forcast.io http://forcast.io. 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.
- solistice 13y agoThe usage of these kinds of icons on forcast.io is brilliant though. I want to see the weather, it moves a little. I mean the only problem with animated icons/buttons like this is that if they get back in style, it essentially opens pandorras box. They make good web design better if used sparingly, yes, but they'll also make bad web design worse. A lot worse. Spinning visual tumor worse.
- mayoff 13y agoTo me this feels like a return to classic geocities design. http://www.textfiles.com/underconstruction/ http://www.textfiles.com/underconstruction/ http://www.bellsnwhistles.com/page29.html http://www.bellsnwhistles.com/page29.html http://www.11points.com/Web-Tech/11_Best_Old_School_Animated_GIFs http://www.11points.com/Web-Tech/11_Best_Old_School_Animated...
- shurcooL 13y agoI can see the similarity, but the big difference is that you can use these animations on hover responsibly. Ironically, the page that lists them all cannot achieve that. Perhaps they should have some sample pages with the animated icons used more subtly, to serve as a demo of good design.
- tedsanders 13y agoI think the difference is that: (1) They only move when you're focusing on them (so they are less distracting) (2) Because they react to your cursor, the page feels responsive
- tedsanders 13y agoI think the difference is that: (1) They only move when you're focusing on them (so they are less distracting) (2) Because they react to your cursor, the page feels responsive
- cocoflunchy 13y agoA 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. Less is more.
- reeses 13y agoIt's a sampler site. The gratuitous emphasis is intentional. What you take away from it is what is important. What would you improve in your design if you were able to add the perception of motion? How would engaging that human capacity make your product better?
- pzeups 13y agoRemember me something... http://www.youtube.com/watch?v=Jz_BGezNE2Y http://www.youtube.com/watch?v=Jz_BGezNE2Y Nice work!
- Cyranix 13y agoWow, I'm really surprised at the comments so far. 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". 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. 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. 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.
- dsowers 13y agoYeah, the comments are completely ridiculous. OP, I salute you for great work. There is definitely a use for these animations. I think the occasional animation can help increase conversion rates by enticing people to click and get further down the funnel. It's no surprise that wycats tweeted yesterday that he hates it when his work gets on HN. The critiques are getting out of control here.
- HCIdivision17 13y agoTo reinforce the point, the page even shows the icons can be static. You certainly don't have to turn every available animation on just because it's there.
- johnbm 13y agoThe problem is that this demo page feels like the modern equivalent of a Geocities page. It shows off the technology, but fails to show how it can be used tastefully by using it everywhere without restraint. Additionally, I find many of the animations confusing and non-meaningful. For example, having an email envelope in a site footer being filled and flying off correctly denotes the concept of "send me an email". But doing the same thing for an email field in a form feels completely out of place. The user is not sending an email, they're just giving their information for future reference. Many of the animations are similar: they demonstrate a vaguely related concept, not the specific use case being demonstrated.
- simonsarris 13y agoSorry 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: 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. When I'm on a website, I'm not appreciating a colorful Monet, I'm trying to always do essentially 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. 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 un-distracts by removing all this popping stuff. And I love Flat UI for this. I can see clearly now, the bevel and embossed rain is gone. Alas these icons are about as distracting as you can get. Many of them resemble a flat UI style, 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. I understand that they're examples of what you could do, but I do hope hey're something no site author would want to do. No user ever has had the thought, "Before I click a button, I really wish it would wabble back and forth." (And if I'm there to read text, I sure don't want anything animating while I'm reading!) ~~~ 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.
- pgrote 13y agoThe bouncing twitter bird is against twitter's TOS, right? https://twitter.com/logo https://twitter.com/logo
- pzeups 13y agoYes. even if Twitter should use this one!
- darklajid 13y agoI cannot resist asking .. what isn't?
- austengary 13y ago"Don't: Animate the bird"
- kailuowang 13y agoOn the demo site(http://codecanyon.net/item/livicons-303-truly-animated-vector-icons/full_screen_preview/4618985 http://codecanyon.net/item/livicons-303-truly-animated-vecto...), 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?
- arianvanp 13y agosame on Chrome Windows 7
- kayge 13y agoThere is a notification on the site that says only some are animated: "On this demo site the most part of the icons are in a static mode with disabled animation to prevent an unauthorized use. To see all of them in action please look at the LivIcons preview video below."
- tonydiv 13y agoRegardless 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. My favorites are (1) Upload, (2) Chrome, (3) Android, (4) and the Spinners. Thank you very much!
- adambard 13y agoI can definitely see the use-case on CTA buttons, it would be really interesting to A/B test.
- ianstormtaylor 13y agoI'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. 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.
- nkozyra 13y agoOh no. Oh god, no.
- capex 13y agoYou 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.
- hadem 13y agoNearly 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. Reminds me of when we used animated GIFs everywhere and construction men explaining how the site is still under construction...
- dmvaldman 13y agothis is awesome. honestly people. shut up.
- sjdev 13y agoI 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.
- cabirum 13y agoDo they affect page performance / drain battery faster? 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?
- achy2 13y agoAn 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.
- rohanic 13y agoI am very impressed. Adding to my current project now. Thank you.
- empire29 13y agoNeat idea, but I dont like the concept. The animations instinctively make me think some action is occurring, which isn't. I think those would be better served to indicate the processing of an action, like the pin wheel/hour glass of old.
- mahmud 13y agoTotally useless for devices without a mouse. Touch-screen devices don't have pointer movement events.
- andyhmltn 13y agoI 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'
- st3fan 13y agoCute but annoying. And has no place on mobile touch devices where Hover is nonexistent.