

Animated Vector Icons - fady
http://livicons.com/#examples

======
Cyranix
Wow, 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.

~~~
HCIdivision17
To 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.

------
simonsarris
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:

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.

~~~
shurcooL
I like flatt-er UI in general, but I don't like it when it goes so far out of
its way that it removes all affordances.

For instance, a button is easily recognizable by its shape. We all know they
can be clicked.

Some flat designs have buttons that look absolutely no different than a label.
Worse yet, sometimes they don't even have hover effects. When the only way I
can find out if something is clickable is by trying to press it, something's
seriously wrong. When there are clickable things in my view that I don't
realize are clickable until much much later, something's wrong.

Go flat, but leave the affordances alone. There's a difference between
throwing everything out that's not needed and throwing everything out.

------
ianstormtaylor
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.

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.

------
tonydiv
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.

My favorites are (1) Upload, (2) Chrome, (3) Android, (4) and the Spinners.
Thank you very much!

------
trebor
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 _needs_
animation for it to make sense to your visitor you're doing it wrong.

~~~
uptown
That 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
_Surely there are instances where animation is appropriate for an interface._

Not surely.

~~~
ryanac
Drag 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.

------
cocoflunchy
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.

Less is more.

~~~
reeses
It'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?

------
pgrote
The bouncing twitter bird is against twitter's TOS, right?

<https://twitter.com/logo>

~~~
darklajid
I cannot resist asking .. what isn't?

------
davefp
I 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
I 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.

------
PixelCut
Our app WebCode (<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.

~~~
gotrythis
Those unexpected downloads on a bunch of the links is... unexpected, and not
cool.

~~~
PixelCut
There are only 2 text links on the title page that result in download - both
links are labeled "Try" and download the demo version. Do you have these in
mind?

------
adambard
I can definitely see the use-case on CTA buttons, it would be really
interesting to A/B test.

------
kailuowang
On the demo site([http://codecanyon.net/item/livicons-303-truly-animated-
vecto...](http://codecanyon.net/item/livicons-303-truly-animated-vector-
icons/full_screen_preview/4618985)), 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?

~~~
kayge
There 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."

------
empire29
Neat 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.

------
mayoff
To me this feels like a return to classic geocities design.

<http://www.textfiles.com/underconstruction/>
<http://www.bellsnwhistles.com/page29.html> [http://www.11points.com/Web-
Tech/11_Best_Old_School_Animated...](http://www.11points.com/Web-
Tech/11_Best_Old_School_Animated_GIFs)

~~~
shurcooL
I 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.

------
Breefield
I've been mulling over these kind of animated icons after seeing the little
weather icons on <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
The 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.

------
capex
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.

------
andyhmltn
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'

------
hadem
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.

Reminds me of when we used animated GIFs everywhere and construction men
explaining how the site is still under construction...

------
achy2
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.

------
sjdev
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.

------
cabirum
Do 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?

------
pzeups
Remember me something... <http://www.youtube.com/watch?v=Jz_BGezNE2Y> Nice
work!

------
mahmud
Totally useless for devices without a mouse. Touch-screen devices don't have
pointer movement events.

------
ffn
Oh wow, this is kind of fun. Might definitely use on some of my quirkier
sites. Thanks OP

------
st3fan
Cute but annoying. And has no place on mobile touch devices where Hover is
nonexistent.

------
rohanic
I am very impressed. Adding to my current project now. Thank you.

------
nkozyra
Oh no.

Oh god, no.

------
dmvaldman
this is awesome. honestly people. shut up.

