19 ms·

Where are all the animated SVGs?

548 points by knowingathing 7y ago

carlg 7y ago
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.
- munk-a 7y ago
  Even within the article there's already one that's questionable from an accessibility standpoint - the speeding train makes me a bit nauseous to look at and might present difficulties to users with balance or ocular disorders. Also, I can't agree with "Let's not just do this because we can." enough.
  - nonbirithm 7y ago
    It's the same kind of distraction as autoplaying videos or picture-in-picture annoyances like YouTube's auto-minimizing window. The mechanism is the same. It's a thing moving in some part of the screen and being distracting, only in this case they provide even less value since they're nothing more than decorative doodads. There isn't even an argument that doodads like these can placed on websites in an attempt to monetize users, like ads, where all the debate about sustainable sources of revenue and the ethics of adblocking come into play. They serve no material purpose at all except to be distracting. Animations of any kind, even the ones that are finite in lifespan or simple page transitions, already annoy me greatly. If we lose this front, where random businesses start adding things like this only because the web platform has sufficiently advanced technologically to allow it, and a majority of users become desensitized into believing it is "cool" and shifting the the baseline of the web such that this majority now expects and might even want this kind of behavior, it would surely become another unnecessary annoyance. I feel like this has already happened with Metro/Flat design and the death of skeuomorphism (more or less), and also the overuse of animated GIFs in blogs. But there's nothing making it outright illegal, so I'm not sure what would stop them from doing so at this point. We can't exactly go back to Web 1.0 (nor should we) - that kind of design is opt-in now.
- kevin_thibedeau 7y ago
  You can do nice things with hover events without creating a distracting mess.
  - jkoberg 7y ago
    Why? To tell the user where there mouse pointer is? Is that a problem? Or are you forcing people to scrub over every element on the screen to "discover" instead of it being visible to begin with? That's annoying as hell and people are probably missing things because you chose to hide them by default.
- _JC_Denton 7y ago
  Totally agreed. The author isn’t wrong about the workflow issues around svgs, but icons are not usually animated for good reason. The human eye is very sensitive to motion. It can be a fun thing to add to loading screens (the gusto pig, for example), but icons are designed to live on a page for a long time and only take our attention when we are actively looking for them. Motion is not good for this purpose.
  - vbezhenar 7y ago
    What about progress overlay icon? It should be animated. Or something like downloading a file. If icon represents a work in progress, it's a good idea to make it animated. Of course animation must not distract too much.
- mcv 7y ago
  I'd like to think we learned from all the horrible animated gifs in the past.
- downerending 7y ago
  We could compromise and just allow blinking text. /s
  - pbhjpbhj 7y ago
    [marquee] only allowing blink would supress my creativity [/marquee]!
- Latty 7y ago
  I agree there is a need to sell the need, and this page doesn't do a good job of doing that because while a looping animation is good for showing the animation, as you say, it isn't a good idea. I can see animations like these working for when a user interacts with something, as an alternative to just highlighting or doing a material style ripple. The problem is that most of the time I'd want that, I'd also want to transition between two states, which—unless I'm missing it—isn't something this offers.
- throw0101a 7y ago
  > I, for one, don't want this. At all. After all, we only got rid of animated GIFs not too long ago. [under-construction.gif]
- willis936 7y ago
  The killer app for animated svgs is not icons. It's graphics that are meant to be given attention to convey something important. We do that with raster graphics and it works okay, but low resolution rasters of yesteryear look bad.
  - Mirioron 7y ago
    And "low resolution" SVGs will look bad in the future too. It won't be as graphically apparent, but they will look barren and odd, because there's no detail as they were designed with a lower resolution in mind.
    - willis936 7y ago
      The detail level is a design choice. Even though you could have immensely intricate SVGs, you expect some graphics to take up a small portion of your view. Unfortunately the screens are the only things getting better over time, not the eyes.
    - chrisweekly 7y ago
      Could you clarify what you mean by "low resolution" SVG?
      - frosted-flakes 7y ago
        Icons designed to be small have less detail and often rely more on the general shape, sometimes exaggerating certain features of the icon to make them stand out. Large icons or images can be filled with lots of rich detail. Scaling up a small icon often makes it look barren and generally out of proportion, and scaling down large, highly detailed icons/images makes the icon "noisy" and loses the essence of the icon. This does not only apply to vector icons, by the way. Most highly polished icon sets will have an icon for different sizes. For example, in Windows, zoom the desktop icons in/out and compare.
- outworlder 7y ago
  They don't have to be animating all the time. However, animations can convey events better than alternatives (popups and the like).
- jeroenhd 7y ago
  I think they can add value as a response to user action. No a repeating animations, but a short animation upon validating data or handling interaction. I would be the first to find a way to disable these if they'd start autoplaying on every website I visit though. An animated green check mark when showing a popup confirming that an action has succeeded, an animated red cross when showing an error, wheels of a car icon rolling when hovering over the car option in the menu, those kinds of animations can all aid design by showing the user that the site or application is responding to user feedback. It makes the user flow just a tiny bit more interactive and polished without being too distracted. After all, if there's a popup, the intention is to direct the attention of the viewer to that spot already. Same with a menu icon. That said, the animations shouldn't be too fast. Some examples, like the moving train, are way too fast to be comfortable to use in my opinion. Proper pacing is important.
- b0rsuk 7y ago
  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.
orangepanda 7y ago
Windows 10 has some not so nice things to say when trying to open the .exe
- dessant 7y ago
  Windows 10 does the same for most newly released executables.
  - mc3 7y ago
    I think the developer of this needs to do something though - it says "Unknown Publisher". Surely that can be fixed.
    - dessant 7y ago
      It can be fixed by spending hundreds of dollars a year on a code signing certificate.
munk-a 7y ago
SVGs in general seem to have had quite a poor adoption rate. Editors for them are fewer, paint can't open or edit them, and support for them is iffy with even google docs not supporting the format for importing an image.
- rodw 7y ago
  > SVGs in general seem to have had quite a poor adoption rate I don't know. I'm not sure what the real numbers are but in my experience SVGs are pretty commonly used for app and web icons because they are easily "themeable" (color changes etc.)
  - munk-a 7y ago
    A lot of designers I know just keep a raw layered image and swap out themeing on a per-case basis. SVGs are easier to dynamically theme, but usually any theme variants get run by a designer anyways that will tweak color tones for the specific usage as needed. Just to be clear though - I love SVGs and want them to get more momentum solely on the basis that they're just a way better way to store abstract line art and can yield proper image scaling... I just think a lot of the technical advantages we tend to think of aren't really that valued by designers and get lost in needing to be done manually anyways.
- mjw1007 7y ago
  One big problem with SVG is that the specification is so large that everyone implements a subset, so interoperability suffers. Lots of XML-based standards of a similar age seem to have suffered from this. There was an idea that there'd be a standard for everything, and each XML-based standard would refer to others when it made sense rather than re-inventing the wheel. But too often the result was that in order to implement standard A fully you needed to implement all of B and C and D which your users didn't really care about, so in practice you ended up with an undocumented de-facto usable subset. (Though for SVG I think the worst problem is that they didn't specify a fixed subset of CSS that should be supported, which isn't an XML-world thing.)
  - 7y ago
jjcm 7y ago
Motion is a design tool like any other and can be abused if it's overused. A button that's a bright color will draw the eyes to that particular element... until that element is everywhere on the page. At that point it just becomes visual noise. Passively animating icons everywhere are a terrible choice, as it doesn't give the eye any focal point. Animations for icons are great if it's an ongoing task that will likely be completed shortly, but that's about it. You should use motion to draw the eyes to one specific thing on the page, and in general when doing motion design I try and only animate one thing on the page at once.
tbarbugli 7y ago
From dev perspective, SVG support on Android is surprisingly bad / hard to get right, same on native iOS
- acephal 7y ago
  Could you expand on this?
Waterluvian 7y ago
What does it add?
rbritton 7y ago
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 SVGs in an environment that has both web and emailed pieces can mean duplicate assets. * For maximum styling control, SVGs must be inlined. You cannot modify most attributes via CSS if they're loaded as an image. And one nit about the linked tool from this post, Motion.app is a bad application name choice for OS X. It conflicts with Apple's Motion.app, which more than a few designers are likely to have.
- felixfbecker 7y ago
  SMIL animations are also obsolete: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animati... The "proper" way are supposed to be CSS animations, but they are not as powerful yet.
  - pcmaffey 7y ago
    As the link says, deprecation has been suspended for a long time now. SMIL support is here to stay.
    - mxfh 7y ago
      It surely doesn't help that SVG 2.0 is on a seemingly perpetual horizon for almost a decade now and nobody was willing to guarantee functionality everywhere. And SMIL certainly will not be in that one. Animation being only the tip of the issues, the moment you rely on anything, that isn't a filled polygon with no stroke, SVG support and compability starts falling apart in the most unexpected places.
    - felixfbecker 7y ago
      This is the official statement from the Chrome team announcing the suspension: > We firmly believe that SMIL is not in the best long-term interests of the open web platform for several reasons: > * There is no clear path towards broad cross-browser support. > * The vendors which support SMIL have implementations that continue to vary widely, even after more than a decade of support. > * There are high-quality cross-platform replacement features on the horizon. https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5o0yiO440LM%5B126-150%5D https://groups.google.com/a/chromium.org/forum/#!topic/blink... That still sounds very "obsolete" to me. CSS animations also solve the performance problem because they can be GPU accelerated.
jarjoura 7y ago
> Creating animations is hard! This is one reason why many developers do not attempt it. You need to have a "design eye" or you need to study animation. People go to school for years to learn about animation and spend years refining their craft. This! On a project I was working on recently, animations cost around $10k per object. If we wanted to invest in a full experience it easily grew to a several million dollar effort. Although it's high fidelity, the reality is, unlike film or tv, software is ever changing. Styles change and fads come and go. Ultimately the cost is never justified.
- magic_beans 7y ago
  Whoa whoa whoa... I do web animations for a living. What industry/agency/brand do you work with? Are they looking to hire?
- pier25 7y ago
  Unless you were doing pretty complex stuff $10k per animation is quite expensive. I’ve see full animation projects made with less than that.
jeffrogers 7y ago
I’m surprised that some combination of Canvas, SVG, CSS and JavaScript hasn’t replaced Flash. This is established tech and fairly simple. This combo also makes responsiveness easier, IMO.
- Latty 7y ago
  I'd say it comes down to two big issues: the first one being the tooling just isn't there, and people don't want to do this stuff in code. The second—and I'd say probably bigger—issue is that video streaming has solved the problem in most cases instead. Flash animation had its heyday when it was the only way to deliver video and games on the web realistically. With video streaming being so easy and having the added benefit of platforms with lots of eyes already, animation is a hard sell. As you say, responsiveness is a huge advantage for animation, but unfortunately I don't think that is enough to get people on-board.
tumultco 7y ago
I'd be remiss to not point out: the latest version of Tumult Hype [1] added vector shape animation, line drawing, and morphing. It uses SVG under the hood, though SVGs cannot be imported currently. The shape morphing intelligently figures out the best morph such that the from- and to- shapes can have vastly different control points. [1] https://tumult.com/hype/whats-new/4.0/ https://tumult.com/hype/whats-new/4.0/
squared9 7y ago
I wrote SVG-SMIL export for Animatron (www.animatron.com) in 2015 that aimed to get near the level of Adobe Flash in plain browser, however it was extremely difficult due to broken SVG-SMIL implementations in all major browsers. You can see some examples here: https://drive.google.com/drive/folders/14DKPte-1YvU5IV3Rb8zd2ptRjzSFDvIO?usp=sharing https://drive.google.com/drive/folders/14DKPte-1YvU5IV3Rb8zd... The issue back then was that Google suddenly announced their intent to deprecate and remove SVG-SMIL from Chrome, instantly freezing all development there. However YouTube complained and made them change their minds; later they put it into a "frozen" mode but didn't remove it. For most artists it would have been a risky bet to use it if Google didn't want to support it any further, despite the promise of having an official standard for animation in all browsers.
pcmaffey 7y ago
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/roll-your-own-analytics https://www.pcmaffey.com/finally-i-closed-my-linkedin https://www.pcmaffey.com/finally-i-closed-my-linkedin https://www.astronomer.io/404.html 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 using CSS to drive the animations has varied results (especially in Safari) and worse performance.
- rchaud 7y ago
  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?
  - pcmaffey 7y ago
    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 <g> tags and adding mostly <animateTransforms>. 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.
desc 7y ago
Because we wouldn't want mere icons distracting the user from being distracted by all the other stupid animations in the average UI.
bobblywobbles 7y ago
I appreciate your work and what you've done here. I would consider using these if I could animate them on an event, such as a mouse over or click, but not on a cycle by itself. Is that possible to do? Also, would it be possible to buy a license for just the icons and not have any recurring fee if I didn't want to use the IDE?
dekhn 7y ago
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 example, I wanted to make an animation of a robot that assembled burgers where burger components dropped down a hopper, the robot moved its arms around (kinematics) to assemble components, a conveyor belt to convey burgers, etc. I ended up using SVG Animations. To get anything done, I ended up on 3-4 pages where the designers who implemented the Animation standard show some examples and a few sparse reference docs. I'm not completely unhappy with the results (many kids at maker faire found the animation enjoyable) but it still feels like the web is missing a really good graphics/view framework like https://doc.qt.io/qt-5/graphicsview.html https://doc.qt.io/qt-5/graphicsview.html The graphics view framework is very performant, provides a lot of very nice features "for free", and can make extremely sophisticated applications. It's well documented, but of course is not a web app (some days I wonder what would happen if people did full Qt-on-WASM with a browser window rendering context).
- gpderetta 7y ago
  No need to wonder: http//doc.qt.io/qt-5/wasm.html
  - sgerenser 7y ago
    It's pretty terrible though. Definitely not close to "production-ready." Even simple examples take a long time to load and some don't load at all (on Safari and Firefox anyway, I don't use Chrome).
- thedance 7y ago
  What you described seems like it would have been dead simple in Flash.
  - dekhn 7y ago
EarthyThunder 7y ago
If it's done tastefully, I can see this being beautiful. However, I just know it'll be abused and we'll end up with horrible UX on loads of websites
ihuman 7y ago
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.
- closetohome 7y ago
  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.
markdown 7y ago
> 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.
- gugagore 7y ago
  What did the workflow of using photoshop even look like? I might be misinterpreting "web design". It means developing a design to be consumed by a computer, and also developing a design to be consumed by a web developer (like a mock-up design).
  - markdown 7y ago
    I have no idea how they did it. In Fireworks you could just slice up your design and export all the assets in one go, all at the desired quality settings. It even supported 32bit png files with alpha transparency. You could have multiple pages and each of those pages could have different states. You could have buttons all over your website that would change everywhere if you edited them in one place (symbols). It was just perfect for web dev.
- deleted 7y ago
  [deleted]
- lukebitts 7y ago
  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.
  - markdown 7y ago
    Fireworks is the only reason I haven't updated macOS past Mojave. It won't run on Catalina.
JohnFen 7y ago
> Why isn’t the web filled with these amazing, accessible, performant animations? I, for one, am exceedingly happy that the web isn't filled with this stuff.
arianestrasse 7y ago
Looks cool and all, I was actually pretty sold the moment you started to talk about the editor. However, I still don't know what your editor actually does. You ended the article abruptly and maybe expect people to click the link and go to your website to learn more? A bit more introduction is needed for your call-to-action to work. You can't just say "I made an editor" without at least listing the key features. Other than that, good luck.
sramsay 7y ago
My collaborator and I create animation art with SVG (he is the animator, and I'm the composer/video editor, though we work together on the overall concept). Some samples of our work here: https://vimeo.com/user1776782 https://vimeo.com/user1776782 Thing is, he doesn't use the animation facilities of SVG, because he can't get it to do the extremely complex things he wants to do with it (honestly, his XML/XSLT/SVG chops are not really in question here). Instead, he has a (gigantic) system that renders individual frames using XSLT, and then stitches it together with ffmpeg. His SVG files are already constantly pushing up against the abilities of tools like Batik, and for XSLT, there's really only one fully compliant tool in town (Saxon). I find it kind of amazing that there aren't better tools out there for SVG -- and frankly, for XML. The fast tools (imagemagick, rsvg, libxslt) aren't compliant, and the compliant ones aren't fast (they're all in Java and very resource intensive). Despite the fact that all of this uses open standards, it can sometimes feel as if we're working in the next Flash.
jazzyjackson 7y ago
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); https://www.polygon.com/a/ps4-review/controller https://www.polygon.com/a/ps4-review/controller https://www.polygon.com/a/xbox-one-review#console https://www.polygon.com/a/xbox-one-review#console
- type_enthusiast 7y ago
  Used this same trick (but with SMIL) for an automotive client back ca. 2004. They wanted their electrical systems' documentation diagrams to be in SVG, with signals being animated in a similar fashion. At the time the only viewer that supported it was Adobe's ActiveX plugin! (Not claiming credit for the trick; AFAIR I found it on a web forum somewhere... wish I remember who invented it)
- scarejunba 7y ago
  That is remarkable art. Thanks for sharing it!
- notJim 7y ago
  Those graphics are gorgeous. So crisp!
- neilduncan 7y ago
  There was a great blog post, explaining how the team did it. https://product.voxmedia.com/2013/11/25/5426880/polygon-feature-design-svg-animations-for-fun-and-profit https://product.voxmedia.com/2013/11/25/5426880/polygon-feat...
Jerry2 7y ago
The lack of open-source animation tools is really concerning to me. I've been looking for a way to animate some text and graphics for a series of training presentations that I was making and I couldn't find anything suitable. Open source tools are either geared towards animation of cartoons or they're so rudimentary that they're not really valuable to invest the time into. Anyone have any recommendations for animation tools? Something that works either on macOS or Linux? If only paid solutions exist, what's out there (besides After Effects)?
- neuromute 7y ago
  Three animation tools (not strictly SVG-related) that spring to mind: Pencil 2D Synfig Studio OpenToonz (used by Studio Ghibli, no less!) If you want 3D, then Blender is a fantastic open source tool.
  - buovjaga 7y ago
    Synfig now includes a Lottie exporter: https://www.synfig.org/2019/12/27/whats-coming-to-synfig-1-4-0-part-2/ https://www.synfig.org/2019/12/27/whats-coming-to-synfig-1-4... It is in the 1.3.12 release. There is also this new tool called enve (Linux only): https://maurycyliebner.github.io/ https://maurycyliebner.github.io/
johnl1479 7y ago
I expected this to be a tool to easily animate SVGs I already had.
dankohn1 7y ago
CNCF now administers one of the larger collection of SVG logos at https://l.cncf.io https://l.cncf.io. We've also rolled out other landscapes like for motion picture animation https://l.aswf.io https://l.aswf.io and AI https://l.lfai.foundation https://l.lfai.foundation. In the process, we've built a tool to autocrop and optimize SVGs so that they are as small as possible and work correctly in Illustrator and all other readers. The tool is open source and available at https://autocrop.cncf.io https://autocrop.cncf.io.
gugagore 7y ago
I can probably clarify my ignorance on wikipedia, but I am interested in the hackernews personality, and hope that I'll learn more about it here. Does all of this apply to HTML5 animations, too? Are there tools that are HTML5-animations/SVG agnostic? They seem like they could be closely related, or easily confused.
jrumbut 7y ago
I have no idea how this article overlooked D3 which has excellent capabilities here. You can then view your icon as data (no need to send the whole SVG if that doesn't make sense), use their affine transforms and force simulations and all that good stuff that is important to get exactly right. Visualization people have done plenty of animated and interactive SVGs. I find performance issues past a certain size but ease of implementation is very good once you get the hang of it.
- inferiorhuman 7y ago
  Sure but D3 is a bit of a workaround. It can animate SVGs (well any DOM node) but doesn't create animated SVGs. By more or less requiring Javascript with a DOM implementation you're limiting D3's use case to browsers. Server side rendering becomes more tedious. D3 is a poor fit for something like an application dock where you don't necessarily want a whole HTML rendering engine. Performance is definitely dependent on environment. For visualizations that use simple shapes like area and bar charts, force directed graphs, etc. SVG performance is pretty decent across the board. If you need to use complex shapes like for a cloropleth or globe, Safari chokes. I don't use Chrome anymore so I can't compare, but Firefox will happily render and animate a globe using relatively detailed (1:50m) data. With Safari you need to go out to 1:110m to get passable performance. Let's not even get into Safari's atrocious font handling... ugh.
deleted 7y ago
[deleted]
crazygringo 7y ago
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 interface/page icons to be animated constantly, because it's always distracting and never good. What about intermittently, like hover states? Still no, because a hover state exists to give confirmation that you've mousedowned on a clickable area -- so the hover needs to be an area-wide confirmation (like changing the button color). Animating an icon instead is too confusing, and animating it on top of a color change is too redundant and noisy. So I just don't see any use case at all. (Extra note #1: motion itself can be helpful in UX -- e.g. an icon expanding in size to a card, a card sliding off, etc. -- but none of that involves animated icons.) (Extra note #2: except for gaming interfaces which are all about sensory excess -- shadows! sounds! animated icons! pop-out effects! -- but those tend to be based on other technology workflows anyways.)
- mc3 7y ago
  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. * Where the animation is useful in explaining something, for example, an explanation of balancing trees. We shouldn't use them on: * Static "non-app" information pages / landing pages etc. * As a button icon pre-action. E.g. the word SUBMIT sliding from side to side would be annoying!
  - ben_w 7y ago
    > We shouldn't use them on: I’m thinking back to my school days, where my fellow students had non-tiling animated gifs as the background image of their Geocities accounts.
chewxy 7y ago
I used an animated SVG to explain backpropagation: https://blog.chewxy.com/2016/12/06/a-direct-way-of-understanding-backpropagation-and-gradient-descent/ https://blog.chewxy.com/2016/12/06/a-direct-way-of-understan... It was A LOT of work
werber 7y ago
Well done svg animation is really impressive (Sarah Drasners work comes to mind) but i have never felt a pressing need to add it to my professional tool set when considering the time commitment and the fact I’ve never been asked about it in a front end interview
scarejunba 7y ago
This is great and your art is great. I'd love this for interstitials or throbbers.
nearmuse 7y ago
Obviously good for maps and graphs, and any dataviz in general.
joemaller1 7y ago
Comment from the post: > To think that 24 years ago we had streaming vector animation with synchronized sound that could do decent fps on a crappy computer and download over the phone line at 28Kbps AND an IDE that could make those animations with ease. Yes, I'm talking about flash. It's mindblowing that today with HTML+JS+SVG+CSS we're struggling to create stuff that was dead easy back then.
EGreg 7y ago
My question is, what is the best way to create a sort of 3d “ripple” wave outward from a button, expanding over a background as it spreads in circular wave? Displacement Maps? WebGL? Animated SVG? I want a hexagonal grid and displace it by an expanding circular wave in “3d” when a button is clicked. Can anyone here do this? I need something that works on iOS safari as well (webgl seems not to)
egypturnash 7y ago
Once upon a time, there was an animation tool called Flash. It had a very simple interface, that focused largely on moving stuff around visually. Its timeline was easy to understand: one row for each separate object, with a keyframe that would store whatever changes you made. You could draw directly in it. You could import art from other programs and move that around. You could combine the two. Wanna do full, traditional animation? Flash could do it. Wanna do paper-doll stuff? Flash had you there, too. Artists loved it. It got used for the web. it got used for games - it was really easy to animate some little critters moving around and start attaching behaviors to them, especially in Actionscript 2. It got used for animation. It's still being used for some animation - my former co-worker who's now heading the animation on Teen Titans Go used it to crank out a feature film alongside one of the last few seasons. Then Apple killed it. The Flash plugin was a giant security hole, what with the animation files having no less than three possible types of code embedded in them. It didn't draw very efficiently, and it burned through battery like there was no battery. Apple didn't want any of these things on their brand new iPhone, and they captured enough of the market that "Flash" is now considered a dirty word. Now we have SVG. Which you can animate via CSS. And we have people starting to try and make editors that can be used by non-programmers. But all of them seem to insist on exposing separate controls for every separate property, each with their own timelines hidden inside an object's timeline. After Effects is the model, and it's a slow, stiff, fiddly model versus Flash's ability to just lay down a keyframe and draw some stuff, or move a symbol around with a nice little free transform tool that lets you scale, rotate, and skew everything right there on the canvas. You wanna make SVG attractive? You wanna see people playing with its potential? Go find some people who remember using Flash, who made cool animation and/or games, not programmers or designers. Get a copy of their favorite version running in a VM (me, I think it peaked at 5, I think TTG is currently on CC2015 [aka version 15]). Pay them to make a short animation, and watch how they use it, and make your editor able to act like that instead of like After Effects. And then make it easy to export this stuff and put it on the web. One file to upload, please. One simple tag to dump into your HTML. (But first check if Adobe Animate can export animations as SVG, because that's what Flash got renamed as once they had a working HTML5 exporter.) (and also yes I am intimately aware of Flash's many flaws, don't bother listing them, I'm mostly glad to see it gone, but there were some things it did really well.)
jaeh 7y ago
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 almost tempted to install a windows vm just to test this, which is a huge compliment!
- shrimp_emoji 7y ago
  Lubuntu?! xD Talk about lamenting the state of things.
ketzo 7y ago
> Instead of saying “Urgh, why don’t they learn to code?” instead let’s think of another solution. Always refreshing to see this as the motivation for an article.
switchstance 7y ago
Heads up. Apple has an animation application called Motion. https://www.apple.com/final-cut-pro/motion/ https://www.apple.com/final-cut-pro/motion/
deleted 7y ago
[deleted]
miguelmota 7y ago
Wish there was Linux support to try it out
fnord77 7y ago
6. animated things on the screen are annoying
sandGorgon 7y ago
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
- joking 7y ago
  is there an option for those who don't want another subscription for editing an image once in a while?
  - sandGorgon 7y ago
    Not sure. you could just download from the thousands here - https://lottiefiles.com/ https://lottiefiles.com/
- jkoberg 7y ago
  Have you used Airbnb's apps? They're the worst example of "design" over actual usability.
  - sandGorgon 7y ago
    Lottie is not just used on Airbnb apps.
bvrmn 7y ago
Yes, we have fast CPUs now, lets burn these idle cycles for distracting icon animations! (OP article page fully loads 1 cpu core).
thomasfl 7y ago
Please bring on the animated SVG's! Animated SVG is probably the best technique to create functional animations on the web. Functional animations is not about grabbing attention. It's all about making the metaphors more understandable and help users create a visual model of the functionality. Typically through animated transitions between different views and screens in the web app.
spyckie2 7y ago
Animations look great when they work but affect the experience horribly when they don't. I'm for an easier animation creation framework but would rather not have a bootstrap-like library for animations.
rutierut 7y ago
I'm working on some animated SVG's for my landing page, after trying to find some tools to help animating this and trying out SVGator I ended up so frustrated that I just switched back to hand-coding them. It's not the best but works pretty ok, here's a screen shot of what it looks like: https://i.imgur.com/wohZ3NG.png https://i.imgur.com/wohZ3NG.png
dreamcompiler 7y ago
Despite the hate for this idea, there's a perfect use case: Industrial process control. Is the conveyor belt running? Is the vat full of hot steel tilting? What's the level of toluene in tank 1? And yes, have the fans on the ventilator started turning?
kingludite 7y ago
Maybe some modal dialog "For proper functionality this website requires the use of animations." With an "agree" and a "not sure" button, a "read more" link and a checkbox to set a cookie.
c2h5oh 7y ago
Many SVG animations are not gpu accelerated in both Chrome and Firefox - a 20x20 px animated icon can get my laptop to run one core at 100% and throttle.
b0rsuk 7y ago
Didn't SVG simply lose the power struggle with Javascript/Canvas people? I've heard most of the cool features were poached and implemented into CSS.
austincheney 7y ago
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.
wodenokoto 7y ago
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.
rchaud 7y ago
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.
jkoberg 7y ago
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.

548 points by knowingathing 7y ago

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.

munk-a 7y ago
Even within the article there's already one that's questionable from an accessibility standpoint - the speeding train makes me a bit nauseous to look at and might present difficulties to users with balance or ocular disorders. Also, I can't agree with "Let's not just do this because we can." enough.
- nonbirithm 7y ago
  It's the same kind of distraction as autoplaying videos or picture-in-picture annoyances like YouTube's auto-minimizing window. The mechanism is the same. It's a thing moving in some part of the screen and being distracting, only in this case they provide even less value since they're nothing more than decorative doodads. There isn't even an argument that doodads like these can placed on websites in an attempt to monetize users, like ads, where all the debate about sustainable sources of revenue and the ethics of adblocking come into play. They serve no material purpose at all except to be distracting. Animations of any kind, even the ones that are finite in lifespan or simple page transitions, already annoy me greatly. If we lose this front, where random businesses start adding things like this only because the web platform has sufficiently advanced technologically to allow it, and a majority of users become desensitized into believing it is "cool" and shifting the the baseline of the web such that this majority now expects and might even want this kind of behavior, it would surely become another unnecessary annoyance. I feel like this has already happened with Metro/Flat design and the death of skeuomorphism (more or less), and also the overuse of animated GIFs in blogs. But there's nothing making it outright illegal, so I'm not sure what would stop them from doing so at this point. We can't exactly go back to Web 1.0 (nor should we) - that kind of design is opt-in now.
kevin_thibedeau 7y ago
You can do nice things with hover events without creating a distracting mess.
- jkoberg 7y ago
  Why? To tell the user where there mouse pointer is? Is that a problem? Or are you forcing people to scrub over every element on the screen to "discover" instead of it being visible to begin with? That's annoying as hell and people are probably missing things because you chose to hide them by default.
_JC_Denton 7y ago
Totally agreed. The author isn’t wrong about the workflow issues around svgs, but icons are not usually animated for good reason. The human eye is very sensitive to motion. It can be a fun thing to add to loading screens (the gusto pig, for example), but icons are designed to live on a page for a long time and only take our attention when we are actively looking for them. Motion is not good for this purpose.
- vbezhenar 7y ago
  What about progress overlay icon? It should be animated. Or something like downloading a file. If icon represents a work in progress, it's a good idea to make it animated. Of course animation must not distract too much.
mcv 7y ago
I'd like to think we learned from all the horrible animated gifs in the past.
downerending 7y ago
We could compromise and just allow blinking text. /s
- pbhjpbhj 7y ago
  [marquee] only allowing blink would supress my creativity [/marquee]!
Latty 7y ago
I agree there is a need to sell the need, and this page doesn't do a good job of doing that because while a looping animation is good for showing the animation, as you say, it isn't a good idea. I can see animations like these working for when a user interacts with something, as an alternative to just highlighting or doing a material style ripple. The problem is that most of the time I'd want that, I'd also want to transition between two states, which—unless I'm missing it—isn't something this offers.
throw0101a 7y ago
> I, for one, don't want this. At all. After all, we only got rid of animated GIFs not too long ago. [under-construction.gif]
willis936 7y ago
The killer app for animated svgs is not icons. It's graphics that are meant to be given attention to convey something important. We do that with raster graphics and it works okay, but low resolution rasters of yesteryear look bad.
- Mirioron 7y ago
  And "low resolution" SVGs will look bad in the future too. It won't be as graphically apparent, but they will look barren and odd, because there's no detail as they were designed with a lower resolution in mind.
  - willis936 7y ago
    The detail level is a design choice. Even though you could have immensely intricate SVGs, you expect some graphics to take up a small portion of your view. Unfortunately the screens are the only things getting better over time, not the eyes.
  - chrisweekly 7y ago
    Could you clarify what you mean by "low resolution" SVG?
    - frosted-flakes 7y ago
      Icons designed to be small have less detail and often rely more on the general shape, sometimes exaggerating certain features of the icon to make them stand out. Large icons or images can be filled with lots of rich detail. Scaling up a small icon often makes it look barren and generally out of proportion, and scaling down large, highly detailed icons/images makes the icon "noisy" and loses the essence of the icon. This does not only apply to vector icons, by the way. Most highly polished icon sets will have an icon for different sizes. For example, in Windows, zoom the desktop icons in/out and compare.
outworlder 7y ago
They don't have to be animating all the time. However, animations can convey events better than alternatives (popups and the like).
jeroenhd 7y ago
I think they can add value as a response to user action. No a repeating animations, but a short animation upon validating data or handling interaction. I would be the first to find a way to disable these if they'd start autoplaying on every website I visit though. An animated green check mark when showing a popup confirming that an action has succeeded, an animated red cross when showing an error, wheels of a car icon rolling when hovering over the car option in the menu, those kinds of animations can all aid design by showing the user that the site or application is responding to user feedback. It makes the user flow just a tiny bit more interactive and polished without being too distracted. After all, if there's a popup, the intention is to direct the attention of the viewer to that spot already. Same with a menu icon. That said, the animations shouldn't be too fast. Some examples, like the moving train, are way too fast to be comfortable to use in my opinion. Proper pacing is important.
b0rsuk 7y ago
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.

orangepanda 7y ago

Windows 10 has some not so nice things to say when trying to open the .exe

dessant 7y ago
Windows 10 does the same for most newly released executables.
- mc3 7y ago
  I think the developer of this needs to do something though - it says "Unknown Publisher". Surely that can be fixed.
  - dessant 7y ago
    It can be fixed by spending hundreds of dollars a year on a code signing certificate.

munk-a 7y ago

SVGs in general seem to have had quite a poor adoption rate. Editors for them are fewer, paint can't open or edit them, and support for them is iffy with even google docs not supporting the format for importing an image.

rodw 7y ago
> SVGs in general seem to have had quite a poor adoption rate I don't know. I'm not sure what the real numbers are but in my experience SVGs are pretty commonly used for app and web icons because they are easily "themeable" (color changes etc.)
- munk-a 7y ago
  A lot of designers I know just keep a raw layered image and swap out themeing on a per-case basis. SVGs are easier to dynamically theme, but usually any theme variants get run by a designer anyways that will tweak color tones for the specific usage as needed. Just to be clear though - I love SVGs and want them to get more momentum solely on the basis that they're just a way better way to store abstract line art and can yield proper image scaling... I just think a lot of the technical advantages we tend to think of aren't really that valued by designers and get lost in needing to be done manually anyways.
mjw1007 7y ago
One big problem with SVG is that the specification is so large that everyone implements a subset, so interoperability suffers. Lots of XML-based standards of a similar age seem to have suffered from this. There was an idea that there'd be a standard for everything, and each XML-based standard would refer to others when it made sense rather than re-inventing the wheel. But too often the result was that in order to implement standard A fully you needed to implement all of B and C and D which your users didn't really care about, so in practice you ended up with an undocumented de-facto usable subset. (Though for SVG I think the worst problem is that they didn't specify a fixed subset of CSS that should be supported, which isn't an XML-world thing.)
- 7y ago

jjcm 7y ago

Motion is a design tool like any other and can be abused if it's overused. A button that's a bright color will draw the eyes to that particular element... until that element is everywhere on the page. At that point it just becomes visual noise. Passively animating icons everywhere are a terrible choice, as it doesn't give the eye any focal point. Animations for icons are great if it's an ongoing task that will likely be completed shortly, but that's about it. You should use motion to draw the eyes to one specific thing on the page, and in general when doing motion design I try and only animate one thing on the page at once.

tbarbugli 7y ago

From dev perspective, SVG support on Android is surprisingly bad / hard to get right, same on native iOS

acephal 7y ago
Could you expand on this?

Waterluvian 7y ago

What does it add?

rbritton 7y ago

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 SVGs in an environment that has both web and emailed pieces can mean duplicate assets. * For maximum styling control, SVGs must be inlined. You cannot modify most attributes via CSS if they're loaded as an image. And one nit about the linked tool from this post, Motion.app is a bad application name choice for OS X. It conflicts with Apple's Motion.app, which more than a few designers are likely to have.

felixfbecker 7y ago
SMIL animations are also obsolete: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animati... The "proper" way are supposed to be CSS animations, but they are not as powerful yet.
- pcmaffey 7y ago
  As the link says, deprecation has been suspended for a long time now. SMIL support is here to stay.
  - mxfh 7y ago
    It surely doesn't help that SVG 2.0 is on a seemingly perpetual horizon for almost a decade now and nobody was willing to guarantee functionality everywhere. And SMIL certainly will not be in that one. Animation being only the tip of the issues, the moment you rely on anything, that isn't a filled polygon with no stroke, SVG support and compability starts falling apart in the most unexpected places.
  - felixfbecker 7y ago
    This is the official statement from the Chrome team announcing the suspension: > We firmly believe that SMIL is not in the best long-term interests of the open web platform for several reasons: > * There is no clear path towards broad cross-browser support. > * The vendors which support SMIL have implementations that continue to vary widely, even after more than a decade of support. > * There are high-quality cross-platform replacement features on the horizon. https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/5o0yiO440LM%5B126-150%5D https://groups.google.com/a/chromium.org/forum/#!topic/blink... That still sounds very "obsolete" to me. CSS animations also solve the performance problem because they can be GPU accelerated.

jarjoura 7y ago

> Creating animations is hard! This is one reason why many developers do not attempt it. You need to have a "design eye" or you need to study animation. People go to school for years to learn about animation and spend years refining their craft. This! On a project I was working on recently, animations cost around $10k per object. If we wanted to invest in a full experience it easily grew to a several million dollar effort. Although it's high fidelity, the reality is, unlike film or tv, software is ever changing. Styles change and fads come and go. Ultimately the cost is never justified.

magic_beans 7y ago
Whoa whoa whoa... I do web animations for a living. What industry/agency/brand do you work with? Are they looking to hire?
pier25 7y ago
Unless you were doing pretty complex stuff $10k per animation is quite expensive. I’ve see full animation projects made with less than that.

jeffrogers 7y ago

I’m surprised that some combination of Canvas, SVG, CSS and JavaScript hasn’t replaced Flash. This is established tech and fairly simple. This combo also makes responsiveness easier, IMO.

Latty 7y ago
I'd say it comes down to two big issues: the first one being the tooling just isn't there, and people don't want to do this stuff in code. The second—and I'd say probably bigger—issue is that video streaming has solved the problem in most cases instead. Flash animation had its heyday when it was the only way to deliver video and games on the web realistically. With video streaming being so easy and having the added benefit of platforms with lots of eyes already, animation is a hard sell. As you say, responsiveness is a huge advantage for animation, but unfortunately I don't think that is enough to get people on-board.

tumultco 7y ago

I'd be remiss to not point out: the latest version of Tumult Hype [1] added vector shape animation, line drawing, and morphing. It uses SVG under the hood, though SVGs cannot be imported currently. The shape morphing intelligently figures out the best morph such that the from- and to- shapes can have vastly different control points. [1] https://tumult.com/hype/whats-new/4.0/ https://tumult.com/hype/whats-new/4.0/

squared9 7y ago

I wrote SVG-SMIL export for Animatron (www.animatron.com) in 2015 that aimed to get near the level of Adobe Flash in plain browser, however it was extremely difficult due to broken SVG-SMIL implementations in all major browsers. You can see some examples here: https://drive.google.com/drive/folders/14DKPte-1YvU5IV3Rb8zd2ptRjzSFDvIO?usp=sharing https://drive.google.com/drive/folders/14DKPte-1YvU5IV3Rb8zd... The issue back then was that Google suddenly announced their intent to deprecate and remove SVG-SMIL from Chrome, instantly freezing all development there. However YouTube complained and made them change their minds; later they put it into a "frozen" mode but didn't remove it. For most artists it would have been a risky bet to use it if Google didn't want to support it any further, despite the promise of having an official standard for animation in all browsers.

pcmaffey 7y ago

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/roll-your-own-analytics https://www.pcmaffey.com/finally-i-closed-my-linkedin https://www.pcmaffey.com/finally-i-closed-my-linkedin https://www.astronomer.io/404.html 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 using CSS to drive the animations has varied results (especially in Safari) and worse performance.

rchaud 7y ago
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?
- pcmaffey 7y ago
  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 <g> tags and adding mostly <animateTransforms>. 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.

desc 7y ago

Because we wouldn't want mere icons distracting the user from being distracted by all the other stupid animations in the average UI.

bobblywobbles 7y ago

I appreciate your work and what you've done here. I would consider using these if I could animate them on an event, such as a mouse over or click, but not on a cycle by itself. Is that possible to do? Also, would it be possible to buy a license for just the icons and not have any recurring fee if I didn't want to use the IDE?

dekhn 7y ago

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 example, I wanted to make an animation of a robot that assembled burgers where burger components dropped down a hopper, the robot moved its arms around (kinematics) to assemble components, a conveyor belt to convey burgers, etc. I ended up using SVG Animations. To get anything done, I ended up on 3-4 pages where the designers who implemented the Animation standard show some examples and a few sparse reference docs. I'm not completely unhappy with the results (many kids at maker faire found the animation enjoyable) but it still feels like the web is missing a really good graphics/view framework like https://doc.qt.io/qt-5/graphicsview.html https://doc.qt.io/qt-5/graphicsview.html The graphics view framework is very performant, provides a lot of very nice features "for free", and can make extremely sophisticated applications. It's well documented, but of course is not a web app (some days I wonder what would happen if people did full Qt-on-WASM with a browser window rendering context).

gpderetta 7y ago
No need to wonder: http//doc.qt.io/qt-5/wasm.html
- sgerenser 7y ago
  It's pretty terrible though. Definitely not close to "production-ready." Even simple examples take a long time to load and some don't load at all (on Safari and Firefox anyway, I don't use Chrome).
thedance 7y ago
What you described seems like it would have been dead simple in Flash.
- dekhn 7y ago

EarthyThunder 7y ago

If it's done tastefully, I can see this being beautiful. However, I just know it'll be abused and we'll end up with horrible UX on loads of websites

ihuman 7y ago

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.

closetohome 7y ago
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.

markdown 7y ago

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

gugagore 7y ago
What did the workflow of using photoshop even look like? I might be misinterpreting "web design". It means developing a design to be consumed by a computer, and also developing a design to be consumed by a web developer (like a mock-up design).
- markdown 7y ago
  I have no idea how they did it. In Fireworks you could just slice up your design and export all the assets in one go, all at the desired quality settings. It even supported 32bit png files with alpha transparency. You could have multiple pages and each of those pages could have different states. You could have buttons all over your website that would change everywhere if you edited them in one place (symbols). It was just perfect for web dev.
deleted 7y ago
[deleted]
lukebitts 7y ago
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.
- markdown 7y ago
  Fireworks is the only reason I haven't updated macOS past Mojave. It won't run on Catalina.

JohnFen 7y ago

> Why isn’t the web filled with these amazing, accessible, performant animations? I, for one, am exceedingly happy that the web isn't filled with this stuff.

arianestrasse 7y ago

Looks cool and all, I was actually pretty sold the moment you started to talk about the editor. However, I still don't know what your editor actually does. You ended the article abruptly and maybe expect people to click the link and go to your website to learn more? A bit more introduction is needed for your call-to-action to work. You can't just say "I made an editor" without at least listing the key features. Other than that, good luck.

sramsay 7y ago

My collaborator and I create animation art with SVG (he is the animator, and I'm the composer/video editor, though we work together on the overall concept). Some samples of our work here: https://vimeo.com/user1776782 https://vimeo.com/user1776782 Thing is, he doesn't use the animation facilities of SVG, because he can't get it to do the extremely complex things he wants to do with it (honestly, his XML/XSLT/SVG chops are not really in question here). Instead, he has a (gigantic) system that renders individual frames using XSLT, and then stitches it together with ffmpeg. His SVG files are already constantly pushing up against the abilities of tools like Batik, and for XSLT, there's really only one fully compliant tool in town (Saxon). I find it kind of amazing that there aren't better tools out there for SVG -- and frankly, for XML. The fast tools (imagemagick, rsvg, libxslt) aren't compliant, and the compliant ones aren't fast (they're all in Java and very resource intensive). Despite the fact that all of this uses open standards, it can sometimes feel as if we're working in the next Flash.

jazzyjackson 7y ago

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); https://www.polygon.com/a/ps4-review/controller https://www.polygon.com/a/ps4-review/controller https://www.polygon.com/a/xbox-one-review#console https://www.polygon.com/a/xbox-one-review#console

type_enthusiast 7y ago
Used this same trick (but with SMIL) for an automotive client back ca. 2004. They wanted their electrical systems' documentation diagrams to be in SVG, with signals being animated in a similar fashion. At the time the only viewer that supported it was Adobe's ActiveX plugin! (Not claiming credit for the trick; AFAIR I found it on a web forum somewhere... wish I remember who invented it)
scarejunba 7y ago
That is remarkable art. Thanks for sharing it!
notJim 7y ago
Those graphics are gorgeous. So crisp!
neilduncan 7y ago
There was a great blog post, explaining how the team did it. https://product.voxmedia.com/2013/11/25/5426880/polygon-feature-design-svg-animations-for-fun-and-profit https://product.voxmedia.com/2013/11/25/5426880/polygon-feat...

Jerry2 7y ago

The lack of open-source animation tools is really concerning to me. I've been looking for a way to animate some text and graphics for a series of training presentations that I was making and I couldn't find anything suitable. Open source tools are either geared towards animation of cartoons or they're so rudimentary that they're not really valuable to invest the time into. Anyone have any recommendations for animation tools? Something that works either on macOS or Linux? If only paid solutions exist, what's out there (besides After Effects)?

neuromute 7y ago
Three animation tools (not strictly SVG-related) that spring to mind: Pencil 2D Synfig Studio OpenToonz (used by Studio Ghibli, no less!) If you want 3D, then Blender is a fantastic open source tool.
- buovjaga 7y ago
  Synfig now includes a Lottie exporter: https://www.synfig.org/2019/12/27/whats-coming-to-synfig-1-4-0-part-2/ https://www.synfig.org/2019/12/27/whats-coming-to-synfig-1-4... It is in the 1.3.12 release. There is also this new tool called enve (Linux only): https://maurycyliebner.github.io/ https://maurycyliebner.github.io/

johnl1479 7y ago

I expected this to be a tool to easily animate SVGs I already had.

dankohn1 7y ago

CNCF now administers one of the larger collection of SVG logos at https://l.cncf.io https://l.cncf.io. We've also rolled out other landscapes like for motion picture animation https://l.aswf.io https://l.aswf.io and AI https://l.lfai.foundation https://l.lfai.foundation. In the process, we've built a tool to autocrop and optimize SVGs so that they are as small as possible and work correctly in Illustrator and all other readers. The tool is open source and available at https://autocrop.cncf.io https://autocrop.cncf.io.

gugagore 7y ago

I can probably clarify my ignorance on wikipedia, but I am interested in the hackernews personality, and hope that I'll learn more about it here. Does all of this apply to HTML5 animations, too? Are there tools that are HTML5-animations/SVG agnostic? They seem like they could be closely related, or easily confused.

jrumbut 7y ago

I have no idea how this article overlooked D3 which has excellent capabilities here. You can then view your icon as data (no need to send the whole SVG if that doesn't make sense), use their affine transforms and force simulations and all that good stuff that is important to get exactly right. Visualization people have done plenty of animated and interactive SVGs. I find performance issues past a certain size but ease of implementation is very good once you get the hang of it.

inferiorhuman 7y ago
Sure but D3 is a bit of a workaround. It can animate SVGs (well any DOM node) but doesn't create animated SVGs. By more or less requiring Javascript with a DOM implementation you're limiting D3's use case to browsers. Server side rendering becomes more tedious. D3 is a poor fit for something like an application dock where you don't necessarily want a whole HTML rendering engine. Performance is definitely dependent on environment. For visualizations that use simple shapes like area and bar charts, force directed graphs, etc. SVG performance is pretty decent across the board. If you need to use complex shapes like for a cloropleth or globe, Safari chokes. I don't use Chrome anymore so I can't compare, but Firefox will happily render and animate a globe using relatively detailed (1:50m) data. With Safari you need to go out to 1:110m to get passable performance. Let's not even get into Safari's atrocious font handling... ugh.

deleted 7y ago

[deleted]

crazygringo 7y ago

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 interface/page icons to be animated constantly, because it's always distracting and never good. What about intermittently, like hover states? Still no, because a hover state exists to give confirmation that you've mousedowned on a clickable area -- so the hover needs to be an area-wide confirmation (like changing the button color). Animating an icon instead is too confusing, and animating it on top of a color change is too redundant and noisy. So I just don't see any use case at all. (Extra note #1: motion itself can be helpful in UX -- e.g. an icon expanding in size to a card, a card sliding off, etc. -- but none of that involves animated icons.) (Extra note #2: except for gaming interfaces which are all about sensory excess -- shadows! sounds! animated icons! pop-out effects! -- but those tend to be based on other technology workflows anyways.)

mc3 7y ago
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. * Where the animation is useful in explaining something, for example, an explanation of balancing trees. We shouldn't use them on: * Static "non-app" information pages / landing pages etc. * As a button icon pre-action. E.g. the word SUBMIT sliding from side to side would be annoying!
- ben_w 7y ago
  > We shouldn't use them on: I’m thinking back to my school days, where my fellow students had non-tiling animated gifs as the background image of their Geocities accounts.

chewxy 7y ago

I used an animated SVG to explain backpropagation: https://blog.chewxy.com/2016/12/06/a-direct-way-of-understanding-backpropagation-and-gradient-descent/ https://blog.chewxy.com/2016/12/06/a-direct-way-of-understan... It was A LOT of work

werber 7y ago

Well done svg animation is really impressive (Sarah Drasners work comes to mind) but i have never felt a pressing need to add it to my professional tool set when considering the time commitment and the fact I’ve never been asked about it in a front end interview

scarejunba 7y ago

This is great and your art is great. I'd love this for interstitials or throbbers.

nearmuse 7y ago

Obviously good for maps and graphs, and any dataviz in general.

joemaller1 7y ago

Comment from the post: > To think that 24 years ago we had streaming vector animation with synchronized sound that could do decent fps on a crappy computer and download over the phone line at 28Kbps AND an IDE that could make those animations with ease. Yes, I'm talking about flash. It's mindblowing that today with HTML+JS+SVG+CSS we're struggling to create stuff that was dead easy back then.

EGreg 7y ago

My question is, what is the best way to create a sort of 3d “ripple” wave outward from a button, expanding over a background as it spreads in circular wave? Displacement Maps? WebGL? Animated SVG? I want a hexagonal grid and displace it by an expanding circular wave in “3d” when a button is clicked. Can anyone here do this? I need something that works on iOS safari as well (webgl seems not to)

egypturnash 7y ago

Once upon a time, there was an animation tool called Flash. It had a very simple interface, that focused largely on moving stuff around visually. Its timeline was easy to understand: one row for each separate object, with a keyframe that would store whatever changes you made. You could draw directly in it. You could import art from other programs and move that around. You could combine the two. Wanna do full, traditional animation? Flash could do it. Wanna do paper-doll stuff? Flash had you there, too. Artists loved it. It got used for the web. it got used for games - it was really easy to animate some little critters moving around and start attaching behaviors to them, especially in Actionscript 2. It got used for animation. It's still being used for some animation - my former co-worker who's now heading the animation on Teen Titans Go used it to crank out a feature film alongside one of the last few seasons. Then Apple killed it. The Flash plugin was a giant security hole, what with the animation files having no less than three possible types of code embedded in them. It didn't draw very efficiently, and it burned through battery like there was no battery. Apple didn't want any of these things on their brand new iPhone, and they captured enough of the market that "Flash" is now considered a dirty word. Now we have SVG. Which you can animate via CSS. And we have people starting to try and make editors that can be used by non-programmers. But all of them seem to insist on exposing separate controls for every separate property, each with their own timelines hidden inside an object's timeline. After Effects is the model, and it's a slow, stiff, fiddly model versus Flash's ability to just lay down a keyframe and draw some stuff, or move a symbol around with a nice little free transform tool that lets you scale, rotate, and skew everything right there on the canvas. You wanna make SVG attractive? You wanna see people playing with its potential? Go find some people who remember using Flash, who made cool animation and/or games, not programmers or designers. Get a copy of their favorite version running in a VM (me, I think it peaked at 5, I think TTG is currently on CC2015 [aka version 15]). Pay them to make a short animation, and watch how they use it, and make your editor able to act like that instead of like After Effects. And then make it easy to export this stuff and put it on the web. One file to upload, please. One simple tag to dump into your HTML. (But first check if Adobe Animate can export animations as SVG, because that's what Flash got renamed as once they had a working HTML5 exporter.) (and also yes I am intimately aware of Flash's many flaws, don't bother listing them, I'm mostly glad to see it gone, but there were some things it did really well.)

jaeh 7y ago

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 almost tempted to install a windows vm just to test this, which is a huge compliment!

shrimp_emoji 7y ago
Lubuntu?! xD Talk about lamenting the state of things.

ketzo 7y ago

> Instead of saying “Urgh, why don’t they learn to code?” instead let’s think of another solution. Always refreshing to see this as the motivation for an article.

switchstance 7y ago

Heads up. Apple has an animation application called Motion. https://www.apple.com/final-cut-pro/motion/ https://www.apple.com/final-cut-pro/motion/

deleted 7y ago

[deleted]

miguelmota 7y ago

Wish there was Linux support to try it out

fnord77 7y ago

6. animated things on the screen are annoying

sandGorgon 7y ago

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

joking 7y ago
is there an option for those who don't want another subscription for editing an image once in a while?
- sandGorgon 7y ago
  Not sure. you could just download from the thousands here - https://lottiefiles.com/ https://lottiefiles.com/
jkoberg 7y ago
Have you used Airbnb's apps? They're the worst example of "design" over actual usability.
- sandGorgon 7y ago
  Lottie is not just used on Airbnb apps.

bvrmn 7y ago

Yes, we have fast CPUs now, lets burn these idle cycles for distracting icon animations! (OP article page fully loads 1 cpu core).

thomasfl 7y ago

Please bring on the animated SVG's! Animated SVG is probably the best technique to create functional animations on the web. Functional animations is not about grabbing attention. It's all about making the metaphors more understandable and help users create a visual model of the functionality. Typically through animated transitions between different views and screens in the web app.

spyckie2 7y ago

Animations look great when they work but affect the experience horribly when they don't. I'm for an easier animation creation framework but would rather not have a bootstrap-like library for animations.

rutierut 7y ago

I'm working on some animated SVG's for my landing page, after trying to find some tools to help animating this and trying out SVGator I ended up so frustrated that I just switched back to hand-coding them. It's not the best but works pretty ok, here's a screen shot of what it looks like: https://i.imgur.com/wohZ3NG.png https://i.imgur.com/wohZ3NG.png

dreamcompiler 7y ago

Despite the hate for this idea, there's a perfect use case: Industrial process control. Is the conveyor belt running? Is the vat full of hot steel tilting? What's the level of toluene in tank 1? And yes, have the fans on the ventilator started turning?

kingludite 7y ago

Maybe some modal dialog "For proper functionality this website requires the use of animations." With an "agree" and a "not sure" button, a "read more" link and a checkbox to set a cookie.

c2h5oh 7y ago

Many SVG animations are not gpu accelerated in both Chrome and Firefox - a 20x20 px animated icon can get my laptop to run one core at 100% and throttle.

b0rsuk 7y ago

Didn't SVG simply lose the power struggle with Javascript/Canvas people? I've heard most of the cool features were poached and implemented into CSS.

austincheney 7y ago

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.

wodenokoto 7y ago

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.

rchaud 7y ago

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.

jkoberg 7y ago

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.