Where are all the animated SVGs?

Re:Where are all the animated SVGs? by Animats on Tuesday February 11, 2020 @04:56PM (#22303345)

Please keep the animated SVG's away!

Yes. Now, from the people who brought you the <blink> 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?)

[ Parent | on HN ]

Re:Where are all the animated SVGs? by Izkata on Tuesday February 11, 2020 @05:26PM (#22303627)

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

The new hotness is "neumorphism": https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf...

[ Parent | on HN ]

Re:Where are all the animated SVGs? by _jal on Tuesday February 11, 2020 @07:55PM (#22304689)

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.

[ Parent | on HN ]

Re:Where are all the animated SVGs? by kulahan on Tuesday February 11, 2020 @07:07PM (#22304372)

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.

[ Parent | on HN ]

Re:Where are all the animated SVGs? by cmroanirgo on Tuesday February 11, 2020 @10:48PM (#22305546)

It seems to look a lot like win 95 to me, but rounded and blurred edges! (NW is lighter add SE is darker, & inverted logic when it's depressed)

I recall a comment in some other HN thread the other day about how win 95 was the pinnacle of ux progression and how nothing seems to have really progressed since.

I totally agree that it looks good, & could go crazy wrong, very easily.

[ Parent | on HN ]

Re:Where are all the animated SVGs? by Izkata on Tuesday February 11, 2020 @11:44PM (#22305878)

> & could go crazy wrong, very easily

The introductory post itself shows how easy it is to still mix up cards and buttons in this new style.

[ Parent | on HN ]

Re:Where are all the animated SVGs? by nailer on Wednesday February 12, 2020 @01:03AM (#22306255)

Windows 95 had hard bevelled edges. Neumorphism has the opposite.

[ Parent | on HN ]

Re:Where are all the animated SVGs? by nitrogen on Tuesday February 11, 2020 @11:40PM (#22305853)

Reminds me of the emboss layer effects in really old (and probably new) versions of Photoshop

[ Parent | on HN ]

Re:Where are all the animated SVGs? by abathur on Tuesday February 11, 2020 @08:54PM (#22305029)

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

[ Parent | on HN ]

Re:Where are all the animated SVGs? by omegabravo on Wednesday February 12, 2020 @12:46AM (#22306169)

I'm not looking forward to this excessive padded future.

[ Parent | on HN ]

Re:Where are all the animated SVGs? by vanderZwan on Wednesday February 12, 2020 @04:53AM (#22307460)

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.

[ Parent | on HN ]

Re:Where are all the animated SVGs? by Igelau on Tuesday February 11, 2020 @07:34PM (#22304552)

> Remember "material design?" Whatever happened to that?

You're going to love this.

https://material.io/design/iconography/animated-icons.html

[ Parent | on HN ]

Re:Where are all the animated SVGs? by matthberg on Tuesday February 11, 2020 @10:39PM (#22305512)

I don't know, this is providing a visual feedback that an action was completed, which is much better than the previous material-favorite of expanding circles of slightly-darkened color. I know in my password manager app the button is so small and the animation so fast that by the time my finger is up off the copy password button I'm not sure if anything has happened (thankfully they recently added a toast to prevent this issue).

[ Parent | on HN ]

Re:Where are all the animated SVGs? by SomeGuy789 on Wednesday February 12, 2020 @09:06PM (#22314726)

By and large this seems absolutely useless to me. Sure it looks nice and more "polished" but it doesn't serve any purpose. There plenty of better ways to signal transitions and clicks rather than flaky button animations.

[ Parent | on HN ]

Re:Where are all the animated SVGs? by jkoberg on Wednesday February 12, 2020 @02:05PM (#22311685)

Ugh. These do not "delight" me whatsoever.

[ Parent | on HN ]

Re:Where are all the animated SVGs? by at-fates-hands on Tuesday February 11, 2020 @05:45PM (#22303806)

> Now, from the people who brought you the <blink> 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.

[ Parent | on HN ]