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

81–90 of 200 posts

Re: Where are all the animated SVGs?

#81

Post by MadWombat »

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…

> In fact I can't think of a single good design reason to ever animate an icon

I can think of a few cases where animated icons make sense.

1. Control feedback. If your icon deforms slightly under your mouse when you click, it provides extra feedback indicating that your action was registered.

2. Notifications. As you, yourself said, motion catches attention. So animated icons would serve well for any kind of event notification. New message or event, action completion etc.

3. Progress indication. An icon for something that takes a long time, like a file download, could be animated to indicate that the process is still ongoing.

I am sure there are other examples.

Re: Where are all the animated SVGs?

#82

Post by at-fates-hands »

Animats wrote: post #64
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…

> Now, from the people who brought you the tag,

1,000% agree.

I remember a co-worker who worked tirelessly for about 14 months on a freelance site for a local public school. I got a text from her shortly after they had released the site, it was a simple one line text:

"14 back breaking months of work and compromising to get a good design, and they destroyed it all within an hour of releasing the site." with a link to the site; which had a huge blinking text at the bottom of the site pointing users to their new interactive calendar.

Re: Where are all the animated SVGs?

#83

Post by dekhn »

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…

There are whole worlds of use-cases outside the very restricted design paradigm you're describing.

Re: Where are all the animated SVGs?

#84

Post by mxfh »

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.

It surely doesn't help that SVG 2.0 is on a seemingly perpetual horizon for almost a decade now and nobody was willing to guarantee functionality everywhere. And SMIL certainly will not be in that one.

Animation being only the tip of the issues, the moment you rely on anything, that isn't a filled polygon with no stroke, SVG support and compability starts falling apart in the most unexpected places.

Re: Where are all the animated SVGs?

#85

Post by romwell »

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…

> * 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, responsive, and human.

Re: Where are all the animated SVGs?

#87

Post by MayeulC »

rbritton wrote: post #17

I've recently done quite a bit of work with SVGs, including those with animations. Some observations: * Edge doesn't support SVG animation in the older engine, only the newer Chromium-based one. * Until recently, Chrome had a massive memory leak with SVG animations that loop if left up for several hours. * SVG animations often cause enough CPU load to spin up laptop fans. * There is no SVG support in email, so using…

> There is no SVG support in email, so using SVGs in an environment that has both web and emailed pieces can mean duplicate assets.

FWIW, Thunderbirds displays svg sent as attachments inline at the bottom. Whatever you do, of course, do not break plaintext email. I only use plaintext emails.

Re: Where are all the animated SVGs?

#88

Post by jeroenhd »

carlg wrote: post #2

I, for one, don't want this. At all. Taking a look at my screen right now, there are probably close to a hundred or so icons in various applications visible on my desktop. If all these icons were wiggling and dancing, distracting me in my peripheral vision, it would be infuriating. I already had to disable animation in Slack due to the constant barrage of animated emojis. Let's not just do this because we can.

I think they can add value as a response to user action. No a repeating animations, but a short animation upon validating data or handling interaction. I would be the first to find a way to disable these if they'd start autoplaying on every website I visit though.

An animated green check mark when showing a popup confirming that an action has succeeded, an animated red cross when showing an error, wheels of a car icon rolling when hovering over the car option in the menu, those kinds of animations can all aid design by showing the user that the site or application is responding to user feedback.

It makes the user flow just a tiny bit more interactive and polished without being too distracted. After all, if there's a popup, the intention is to direct the attention of the viewer to that spot already. Same with a menu icon.

That said, the animations shouldn't be too fast. Some examples, like the moving train, are way too fast to be comfortable to use in my opinion. Proper pacing is important.

Re: Where are all the animated SVGs?

#89

Post by joemaller1 »

Comment from the post:

> To think that 24 years ago we had streaming vector animation with synchronized sound that could do decent fps on a crappy computer and download over the phone line at 28Kbps AND an IDE that could make those animations with ease. Yes, I'm talking about flash. It's mindblowing that today with HTML+JS+SVG+CSS we're struggling to create stuff that was dead easy back then.

Re: Where are all the animated SVGs?

#90

Post by lukebitts »

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.

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.
Post reply on HN