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

191–200 of 200 posts

Re: Where are all the animated SVGs?

#191

Post by pcmaffey »

rchaud wrote: post #178
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 wo…

Agreed! My process for creating something like this involves a few steps, but is pretty straightforward:

1. Draw vector art in Infinity Designer on my iPad (with pencil)

2. Export as svg, and then clean it up in Inkscape (simplify paths, finalize shapes, etc).

3. Export Inkscape svg and then optimize it with `svgo --pretty`

4. This results in nice clean svg code that I then hand edit to add the SMIL animations. This involves wrapping objects in tags and adding mostly . Once you get a hang of the syntax (as with any kind of coding) it's relatively easy.

5. Final debugging / testing happens in the browser. Just open the file directly and use the dev tools inspector.

Total time depends, from 2-3 hrs for a simple sketch and animation (eg. the LinkedIn one) to a day or 2 for something complex.

Re: Where are all the animated SVGs?

#192

Post by SomeGuy789 »

Igelau wrote: post #109
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? You're going to love this. https://material.io/design/iconography/animated-icons.html

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.

Re: Where are all the animated SVGs?

#193

Post by wyattpeak »

jkoberg wrote: post #185
wyattpeak wrote: post #125

Earlier quoted context omitted.

A few years ago I would have agreed with you, but I've been very impressed with the subtly moving backgrounds on some Android phones (Samsung?), which attract little enough attention that it took me a few weeks to register it at all. I'm no longer convinced that movement is inherently distracting. I agree that I can't see a really compelling functional usecase here, but aesthetics is a worthy goal in its own right. I…

They had to add settings to turn that stuff off because it makes people woozy. "cute" design with no user goal has collateral damage.

Sure, and colour television made TV worse for the colourblind.

The mere fact that something is worse for some people isn't a sufficient argument. The fact that they haven't removed it entirely suggests that it nevertheless creates a net improvement in customer opinion.

Also I reject your swipe - aesthetics is a valid goal. Functionality is not the only measure of a system.

Re: Where are all the animated SVGs?

#194

Post by egypturnash »

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

Earlier quoted context omitted.

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.

I dug up the Colin Moock article you linked to via archive.org and oh fuck I had forgotten the extent to which AS3 sucked. So much more verbose. So many things that had to be done in much more complex ways. So much time wasted dealing with that instead of actually making whatever interactive thing you were making.

Re: Where are all the animated SVGs?

#195

Post by 32gbsd »

egypturnash wrote: post #194
32gbsd wrote: post #177

Earlier quoted context omitted.

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.

I dug up the Colin Moock article you linked to via archive.org and oh fuck I had forgotten the extent to which AS3 sucked. So much more verbose. So many things that had to be done in much more complex ways. So much time wasted dealing with that instead of actually making whatever interactive thing you were making.

What is the link? Because I could not find it. Html5+js promised a lot and some people just blocked out the bad memories. Blaming it on the iphone is simple but not accurate.

Re: Where are all the animated SVGs?

#196

Post by closetohome »

ihuman wrote: post #36

Does the app do anything besides let you edit the colors, stroke, and speed? The blog post made it sound like it would make creating animations from scratch easier, but all I see is library of pre-made animations. If it can be used to make new animated icons, then the main page does a bad job of showing that.

I tried it and I'm pretty sure that's all it does. There's also no way to import your own SVGs.

Kinda seems like the blog post was just there to sell the app, which is just there to sell 'premium' icons.

Re: Where are all the animated SVGs?

#197

Post by egypturnash »

32gbsd wrote: post #195
egypturnash wrote: post #194

Earlier quoted context omitted.

I dug up the Colin Moock article you linked to via archive.org and oh fuck I had forgotten the extent to which AS3 sucked. So much more verbose. So many things that had to be done in much more complex ways. So much time wasted dealing with that instead of actually making whatever interactive thing you were making.

What is the link? Because I could not find it. Html5+js promised a lot and some people just blocked out the bad memories. Blaming it on the iphone is simple but not accurate.

checks oh it's the "Charges Against AS 3.0" link near the top of the footnotes. https://web.archive.org/web/20080828162816/http://www.inside... is the full article.

I think the last Flash job I had was around '08, dealing with a giant pile of AS3 pain in the form of a museum kiosk I inherited. I sure do not miss it.

Re: Where are all the animated SVGs?

#198

Post by 32gbsd »

egypturnash wrote: post #197
32gbsd wrote: post #195

Earlier quoted context omitted.

What is the link? Because I could not find it. Html5+js promised a lot and some people just blocked out the bad memories. Blaming it on the iphone is simple but not accurate.

checks oh it's the "Charges Against AS 3.0" link near the top of the footnotes. https://web.archive.org/web/20080828162816/http://www.inside... is the full article. I think the last Flash job I had was around '08, dealing with a giant pile of AS3 pain in the form of a museum kiosk I inherited. I sure do not miss it.

thanx. the comments are entertaining - full of AS3 apologists. I wonder where are they now? probably writing javscript and posting videos on ig.

Re: Where are all the animated SVGs?

#199

Post by dessant »

mc3 wrote: post #69
dessant wrote: post #12

Earlier quoted context omitted.

Windows 10 does the same for most newly released executables.

I think the developer of this needs to do something though - it says "Unknown Publisher". Surely that can be fixed.

It can be fixed by spending hundreds of dollars a year on a code signing certificate.

Re: Where are all the animated SVGs?

#200

Post by sandGorgon »

jkoberg wrote: post #187
sandGorgon wrote: post #147

You should try Airbnb Lottie - it converts Aftereffects graphics into formats that are extremely lightweight (some are 3-4 kb) and works on web/android/iOS. Has been used in production over hundreds of millions of devices

Have you used Airbnb's apps? They're the worst example of "design" over actual usability.

Lottie is not just used on Airbnb apps.
Post reply on HN