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

151–160 of 200 posts

Re: Where are all the animated SVGs?

#151

Post by augbog »

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…

> What about intermittently, like hover states? Still no, because a hover state exists to give confirmation that you've mousedowned on a clickable area -- so the hover needs to be an area-wide confirmation (like changing the button color). Animating an icon instead is too confusing, and animating it on top of a color change is too redundant and noisy.

I disagree with this. It can be very effective at signaling users that this is something you want to click. I think some people take animations too far but when used properly, they can be very effective.

I think we should encourage the right kind of animations more than discouraging animating at all. Especially with SVGs, they are more optimized and that's the right way to go about animating something on the web (not a gif that is like 1.5MB).

Re: Where are all the animated SVGs?

#153

Post by dmitriid »

romwell wrote: post #85
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…

> * Confirmation of a user action Also making the UI more live by doing a small animation on hover (or focus change) for those of us who still use mice and keyboards. This helps distinguish clickable/interactive elements from static ones, and helps with discoverability. Highlighting a row/column heading in a table under the cursor, or a border around a clickable element, etc goes a mile towards making the UI snappy,…

For that, you shouldn't disguise interactive elements as static ones. To begin with ;)

Re: Where are all the animated SVGs?

#154

Post by shedside »

markdown wrote: post #108
lukebitts wrote: post #90

Earlier quoted context omitted.

I miss Fireworks so much, I even tried to run the latest version under wine but never managed to get it to run correctly. Does anyone know of a good alternative that runs on Linux? I've been using Gravit Designer but it's kinda slow.

Fireworks is the only reason I haven't updated macOS past Mojave. It won't run on Catalina.

What kills me is that literally nothing (inc Photoshop) will import a .fw.png file and keep it editable. I know it's using some kind of proprietary extension to the PNG format, and that some gradients and textures would inevitably be Fireworks specific, but it'd still be useful to be able to open an old mockup and tinker with it.

Re: Where are all the animated SVGs?

#155

Post by goodguy1234 »

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 bet you are a old person.

damn old people and their eyes.

Re: Where are all the animated SVGs?

#156

Post by xerxesaa »

goodguy1234 wrote: post #155
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 bet you are a old person. damn old people and their eyes.

Great to see ageism is alive and well in our industry. You'll get old some day too.

Re: Where are all the animated SVGs?

#157

Post by golergka »

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…

Counterexample: games. From slowly brewing health indicator in Diablo to shiny coin icons, animations are another one of told that can drive immersion.

But I completely agree with you in regards with websites and productivity apps, of course.

Re: Where are all the animated SVGs?

#158

Post by felixfbecker »

pcmaffey wrote: post #31
felixfbecker wrote: post #20

Earlier quoted context omitted.

SMIL animations are also obsolete: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animati... The "proper" way are supposed to be CSS animations, but they are not as powerful yet.

As the link says, deprecation has been suspended for a long time now. SMIL support is here to stay.

This is the official statement from the Chrome team announcing the suspension:

> We firmly believe that SMIL is not in the best long-term interests of the open web platform for several reasons:

> * There is no clear path towards broad cross-browser support.

> * The vendors which support SMIL have implementations that continue to vary widely, even after more than a decade of support.

> * There are high-quality cross-platform replacement features on the horizon.

https://groups.google.com/a/chromium.org/forum/#!topic/blink...

That still sounds very "obsolete" to me.

CSS animations also solve the performance problem because they can be GPU accelerated.

Re: Where are all the animated SVGs?

#159

Post by steerablesafe »

mjw1007 wrote: post #13
munk-a wrote: post #4

SVGs in general seem to have had quite a poor adoption rate. Editors for them are fewer, paint can't open or edit them, and support for them is iffy with even google docs not supporting the format for importing an image.

One big problem with SVG is that the specification is so large that everyone implements a subset, so interoperability suffers. Lots of XML-based standards of a similar age seem to have suffered from this. There was an idea that there'd be a standard for everything, and each XML-based standard would refer to others when it made sense rather than re-inventing the wheel. But too often the result was that in order to imp…

SVG support is abysmal, most browsers don't even support linearRGB color interpolation in gradients (or elsewhere).

https://www.w3.org/TR/SVG11/painting.html#ColorInterpolation...

Re: Where are all the animated SVGs?

#160

Post by vanderZwan »

Izkata wrote: post #74
Animats wrote: post #64

Earlier quoted context omitted.

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…

> (Remember "material design?" Whatever happened to that?) The new hotness is "neumorphism": https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf...

Finally, a step away from flat design. At this rate, maybe in ten years we'll move on to a normal healthy relationship with skeumorpic inspired interface elements again.
Post reply on HN