Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Where are all the animated SVGs?

getmotion.io

Post reply on HN
Print view View original

61–70 of 200 posts

Re: Where are all the animated SVGs?

#61

Post by chrisweekly »

Mirioron wrote: post #56
willis936 wrote: post #41

Earlier quoted context omitted.

The killer app for animated svgs is not icons. It's graphics that are meant to be given attention to convey something important. We do that with raster graphics and it works okay, but low resolution rasters of yesteryear look bad.

And "low resolution" SVGs will look bad in the future too. It won't be as graphically apparent, but they will look barren and odd, because there's no detail as they were designed with a lower resolution in mind.

Could you clarify what you mean by "low resolution" SVG?

Re: Where are all the animated SVGs?

#62

Post by mc3 »

crazygringo wrote: post #60

Please keep the animated SVG's away! Motion is extremely effective at drawing the eye's attention, and so should never be used unless that's the goal. In fact I can't think of a single good design reason to ever animate an icon except for loading/progress icons, which already are ubiquitous and generally don't need any dedicated animation tools since they're so simple and reusable. You don't ever want normal interfac…

I agree but with the cavaet that animated SVGs can be good for some special cases:

* Loading indicator - from a UX perspective we are used to this so having a non-animated loading is weird. I think gmail used to do it but that was back in the mid 2000s.

* Confirmation of a user action - if I have sent an email then a sound and/or animation can feel good. It is not necessary but sort of adds a magic to the application.

* Where the animation is useful in explaining something, for example, an explanation of balancing trees.

We shouldn't use them on:

* Static "non-app" information pages / landing pages etc.

* As a button icon pre-action. E.g. the word SUBMIT sliding from side to side would be annoying!

Re: Where are all the animated SVGs?

#63

Post by dnautics »

crazygringo wrote: post #60

Please keep the animated SVG's away! Motion is extremely effective at drawing the eye's attention, and so should never be used unless that's the goal. In fact I can't think of a single good design reason to ever animate an icon except for loading/progress icons, which already are ubiquitous and generally don't need any dedicated animation tools since they're so simple and reusable. You don't ever want normal interfac…

How about dynamic timeseries graphs, like grafana?

Re: Where are all the animated SVGs?

#64

Post by Animats »

crazygringo wrote: post #60

Please keep the animated SVG's away! Motion is extremely effective at drawing the eye's attention, and so should never be used unless that's the goal. In fact I can't think of a single good design reason to ever animate an icon except for loading/progress icons, which already are ubiquitous and generally don't need any dedicated animation tools since they're so simple and reusable. You don't ever want normal interfac…

Please keep the animated SVG's away!

Yes. Now, from the people who brought you the tag, continuous junky animations.

You can also do spinning logos in WebGL, but you shouldn't.

The only legit use for this is when you want clicking on a button to indicate that something happened. If you click on a "send" button, and an envelope zips across the screen and disappears, it's OK. If you click on the "Buy" button, it would be useful to have an animation which shows money flying out of your wallet and disappearing. (But Marketing will never go for that.) It would be good to have feedback like that for buttons which do nothing to the display and keep you on the same page, but have some external effect.

(Remember "material design?" Whatever happened to that?)

Re: Where are all the animated SVGs?

#65

Post by scarejunba »

jazzyjackson wrote: post #47

Back in 2013 the game magazine Polygon created really stunning illuminations in their Playstation 4 and Xbox One reviews. It's what got my interested in the more advanced uses of SVG and CSS -- it uses a clever trick where it uses the bezier curves as paths that are then filled in by offsetting the stroke fill... here it is. stroke-dasharray: 422px, 422px; stroke-dashoffset: 0px; fill: rgba(255, 255, 255, 0.333); htt…

That is remarkable art. Thanks for sharing it!

Re: Where are all the animated SVGs?

#66

Post by ben_w »

mc3 wrote: post #62
crazygringo wrote: post #60

Please keep the animated SVG's away! Motion is extremely effective at drawing the eye's attention, and so should never be used unless that's the goal. In fact I can't think of a single good design reason to ever animate an icon except for loading/progress icons, which already are ubiquitous and generally don't need any dedicated animation tools since they're so simple and reusable. You don't ever want normal interfac…

I agree but with the cavaet that animated SVGs can be good for some special cases: * Loading indicator - from a UX perspective we are used to this so having a non-animated loading is weird. I think gmail used to do it but that was back in the mid 2000s. * Confirmation of a user action - if I have sent an email then a sound and/or animation can feel good. It is not necessary but sort of adds a magic to the application…

> We shouldn't use them on:

I’m thinking back to my school days, where my fellow students had non-tiling animated gifs as the background image of their Geocities accounts.

Re: Where are all the animated SVGs?

#67

Post by mc3 »

ben_w wrote: post #66
mc3 wrote: post #62

Earlier quoted context omitted.

I agree but with the cavaet that animated SVGs can be good for some special cases: * Loading indicator - from a UX perspective we are used to this so having a non-animated loading is weird. I think gmail used to do it but that was back in the mid 2000s. * Confirmation of a user action - if I have sent an email then a sound and/or animation can feel good. It is not necessary but sort of adds a magic to the application…

> We shouldn't use them on: I’m thinking back to my school days, where my fellow students had non-tiling animated gifs as the background image of their Geocities accounts.

Yes I should have said: art, generative art and retro-nostalgia sites are excepted.

Re: Where are all the animated SVGs?

#68

Post by [deleted] »

markdown wrote: post #40

> This process reminds me of web design in the 2000s when Photoshop was king. ~~Cries in Adobe Fireworks~~ I always wondered why Adobe Fireworks, which was a hundred times better than PS for web design, never got traction. I mean this was the time of web 2.0 gradients and rounded corner gel buttons and people were making this stuff with freaking PS. Why? Adobe Fireworks could do vector graphics wonderfully.

[deleted]

Re: Where are all the animated SVGs?

#69

Post by mc3 »

dessant wrote: post #12
orangepanda wrote: post #3

Windows 10 has some not so nice things to say when trying to open the .exe

Windows 10 does the same for most newly released executables.

I think the developer of this needs to do something though - it says "Unknown Publisher". Surely that can be fixed.
Post reply on HN