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

171–180 of 200 posts

Re: Where are all the animated SVGs?

#171

Post by b0rsuk »

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.

Wouldn't you love icons that animate on hover? That's when your attention is turned to the icon anyway, often waiting for the tooltip to pop up.

Re: Where are all the animated SVGs?

#173

Post by neilduncan »

jazzyjackson wrote: post #47

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…

There was a great blog post, explaining how the team did it.

https://product.voxmedia.com/2013/11/25/5426880/polygon-feat...

Re: Where are all the animated SVGs?

#174

Post by austincheney »

For icons I prefer Unicode characters, which are text already built into the OS and made available by the browser. There is nothing to download. Some of these icons are colorful graphics. Like SVGs they are always vectors that can be scaled with CSS.

Animated graphics are nice only as a substitution for text content when text content should be eliminated or is not available. One example is waiting for data from a remote computer, such as a spinner. Another example is waiting on CPU time at the local computer, such as building or compiling something. A third example is a software defect that blocks the display of requested text content.

Re: Where are all the animated SVGs?

#175

Post by wodenokoto »

Back when flash was a viable option, people were animating everything, so maybe it indeed is the tool.

Although, hardly anybody is littering their webpages with animated gifs, so maybe we've just grown tired of tiny animations.

Re: Where are all the animated SVGs?

#176

Post by rchaud »

I'm reading about the product, and hoping it's not too good to be true.

I'm working on a digital magazine and have been trying to create animated SVGs for interactions, and it's been a struggle, as the existing tools (some described in the post), require far too much work to animate a small icon or graphic.

Re: Where are all the animated SVGs?

#177

Post by 32gbsd »

egypturnash wrote: post #135
32gbsd wrote: post #131

Earlier quoted context omitted.

everytime I see something like this I remember flash and realize that modern people still do not get why flash was so good. flash found a unique programmer/designer niche but was destroyed by shortsighted greed and over engineering. Its alittle more complicated ( http://owensoft.net/v4/item/2572/ ) but thats basically what happened

I argue that flash died long before the iphone that actually Flash died when Actionshit 3.0 (AS3) was added in June 2006. The advent of ActionScript3 into FlashPlayer 8.5/9 alienated the entire designer/non-coder community by adding a complicated language into a browser plugin Hahaha oh god yes fuck AS3, it was a Serious Language for Serious Programmers that replaced a nice loose little JavaScript variant that was re…

I really need to go back and clean up that article but I got so much hate for talking crap about as3 that its pretty much pointless.

Re: Where are all the animated SVGs?

#178

Post by rchaud »

pcmaffey wrote: post #28

I love SMIL animations. If you're curious about what you can do, here's a few examples: https://www.pcmaffey.com/roll-your-own-analytics https://www.pcmaffey.com/finally-i-closed-my-linkedin https://www.astronomer.io/404.html (let this play > 1 minute) You can open any of these images and View Source to dive in to the implementation... except for Edge, SMIL plays exactly the same in all browsers, whereas I've found u…

Very nice! I love the idea of small animations to dress up long-form articles, and we don't see it enough on the web because most "content" is written by content marketers and animations I guess are too time-intensive to be considered worthwhile.

Could you tell us what the flow looks like? For example, what do you use to create the SVG, clean it up, and import it into SMIL and animate it there?

Also, how much time would you say this process takes you?

Re: Where are all the animated SVGs?

#179

Post by dekhn »

thedance wrote: post #138
dekhn wrote: post #32

I've wanted to use the web as a replacement for PyQt (and tkinter, going all the way back to ~1995). It's really been amazing how badly the web tracks what is possible (and easy!) in a good GUI toolkit. Every 3-5 years I go back and try to find out what is the minimal way to get HTML + JS + CSS to produce something that would be easy in PyQt, while also being fairly principled, standardized, and maintainable. For exa…

What you described seems like it would have been dead simple in Flash.

And fortunately, we've killed that insecure, poorly-designed, but obviously useful way of rendering proprietary applications.

Re: Where are all the animated SVGs?

#180

Post by jkoberg »

Animation is more of a tool to stroke "designer" egos than it is useful.

Most animations offer zero usability improvement, while forcing the user to spend battery rendering dozens of frames to the screen, slowing down interactions, and reducing the user's feel of control and "direct manipulation".

More animated "toys" on websites is a lose, not a win.

Post reply on HN