Live data from Hacker News

Where are all the animated SVGs?

getmotion.io

101–110 of 200 posts

Re: Where are all the animated SVGs?

#101

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…

username checks out

Re: Where are all the animated SVGs?

#102
post #100

before others try: it won't run using wine (at least on lubuntu with wine 4.2) first i was like: oh, another person that understands why this does not happen and laments the state of things. then i scrolled down. this tool sounds awesome. i am a programmer that learned inkscape and edits the curves by hand afterwards, because designers can not be bothered, but animations are a tough problem for me to solve. i am almo…

Lubuntu?! xD Talk about lamenting the state of things.

Re: Where are all the animated SVGs?

#103
post #74
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...

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.

Re: Where are all the animated SVGs?

#104

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…

Animation for infographics or statistics are really useful. Not for UI, I agree on that.

Re: Where are all the animated SVGs?

#105

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…

Those graphics are gorgeous. So crisp!

Re: Where are all the animated SVGs?

#106
post #96

Earlier quoted context omitted.

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 think reversible SVG animation on scroll effects _can_ be quite neat, e.g. https://www.opencrux.com/ It's far preferable to most scroll-related effects I've seen.

Smooth as butter!

Re: Where are all the animated SVGs?

#107
post #62

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…

https://stripe.com has a lot of animations in their landing page, just fyi

Re: Where are all the animated SVGs?

#108

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

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

Re: Where are all the animated SVGs?

#109
post #64

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…

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

You're going to love this.

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

Re: Where are all the animated SVGs?

#110
post #107
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…

https://stripe.com has a lot of animations in their landing page, just fyi

I like them. They are quite subtle.
Post reply on HN