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

111–120 of 200 posts

Re: Where are all the animated SVGs?

#111

Post by _jal »

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

Not sure I need blurry glow everywhere, but anything that re-convinces designers that interactive things should be distinguishable from non-interactive things would be a step up.

Re: Where are all the animated SVGs?

#112

Post by blep-arsh »

fanf2 wrote: post #73
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…

My most hated example of gratuitously distracting page decoration is the wriggling jizz scribbles on https://theoutline.com The worst part is that you can’t get rid the incontinent piss dribbles by whacking the reader mode icon, because the shithead web developers load the whole magazine into one page so reader mode only shows the first article. The developers of that site deserve to have their faces rubbed in my ana…

Oh cool, a faux-Flash site

Re: Where are all the animated SVGs?

#113

Post by starpilot »

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…

> Motion is extremely effective at drawing the eye's attention, and so should never be used unless that's the goal.

In the attention economy, that is almost always the goal.

Re: Where are all the animated SVGs?

#115

Post by jimsmart »

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.

Short answer: Adobe (and their Photoshop) is pretty much the reason Fireworks never got better traction.

Longer answer:

Fireworks was originally a Macromedia product. Back when it was released, from what I recall, it was in fact getting some pretty reasonable traction: in many folks eyes, it was a good upcoming web graphics tool, by the folk who made Flash (which actually had many fans back then). It was cheaper than Adobe's Photoshop, and addressed a different use case, and in those cases it certainly had better workflow.

Then Adobe acquired Macromedia. Fireworks pretty much got back-seated, most probably because Adobe already had a flagship 2d/photo graphics editor. A tiny handful of Fireworks' features made it into Photoshop. And Fireworks got a small amount of integration with the rest of the Adobe suite. But Adobe never really promoted Fireworks. And AFAIK they simply never put any resources (developers) into Fireworks.

Re: Where are all the animated SVGs?

#116

Post by steve76 »

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

You are not build a rubber mat for car stereo controls.

The screen is made of glass, and is about a quarter of an inch deep.

You want immersion, staring into a portal of glowing welcoming magical world.

You will be better off incorporating music. Much more emotional bond.

Re: Where are all the animated SVGs?

#117

Post by steve76 »

MadWombat wrote: post #81
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 no…

4. Tamagotchi !!!

Re: Where are all the animated SVGs?

#118

Post by abathur »

kulahan wrote: post #103
Izkata wrote: post #74

Earlier quoted context omitted.

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

Damn, I like the way that looks. I get why it's catching on! I think this could quickly go from "really awesome" to "super awful" pretty quickly if you didn't have a professional designer working on it, though. Overcrowding seems like it would be worse in this style than in others we've seen get popular over the years.

https://archive.phong.com/tutorials/metal/

Re: Where are all the animated SVGs?

#119

Post by Springtime »

marpstar wrote: post #49
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…

The performance issues are what prevented me from using SMIL. A project I was working on called for an SVG animation that we also had to move on scroll (don't ask...). The animation was choppy and definitely got the fans spinning. Swapping that out for the equivalent CSS animation and everything was smooth as butter. It's obvious that SMIL performance is not as important to the browser makers than CSS animation perfo…

I had the opposite experience a few years ago, where SMIL performed better than CSS animation but it likely varies depending on what is animated. Problem was only that certain browsers at the time (old Edge for ex.) didn't support it. Thankfully Chromium and FF continue to support it. It has its place and also has supported features CSS has only fairly recently begun to see equivalents for (eg: motion paths).
Post reply on HN