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.)
Yes. Now, from the people who brought you the <blink> tag, continuous junky animations.
You can also do spinning logos in WebGL, but you shouldn't.
The only legit use for this is when you want clicking on a button to indicate that something happened. If you click on a "send" button, and an envelope zips across the screen and disappears, it's OK.
If you click on the "Buy" button, it would be useful to have an animation which shows money flying out of your wallet and disappearing. (But Marketing will never go for that.)
It would be good to have feedback like that for buttons which do nothing to the display and keep you on the same page, but have some external effect.
(Remember "material design?" Whatever happened to that?)
Not sure I need blurry glow everywhere, but anything that re-convinces designers that interactive things should be distinguishable from non-interactive things would be a step up.
Damn, I like the way that looks. I get why it's catching on! I think this could quickly go from "really awesome" to "super awful" pretty quickly if you didn't have a professional designer working on it, though. Overcrowding seems like it would be worse in this style than in others we've seen get popular over the years.
It seems to look a lot like win 95 to me, but rounded and blurred edges! (NW is lighter add SE is darker, & inverted logic when it's depressed)
I recall a comment in some other HN thread the other day about how win 95 was the pinnacle of ux progression and how nothing seems to have really progressed since.
I totally agree that it looks good, & could go crazy wrong, very easily.
Finally, a step away from flat design. At this rate, maybe in ten years we'll move on to a normal healthy relationship with skeumorpic inspired interface elements again.
I don't know, this is providing a visual feedback that an action was completed, which is much better than the previous material-favorite of expanding circles of slightly-darkened color. I know in my password manager app the button is so small and the animation so fast that by the time my finger is up off the copy password button I'm not sure if anything has happened (thankfully they recently added a toast to prevent this issue).
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.
> Now, from the people who brought you the <blink> tag,
1,000% agree.
I remember a co-worker who worked tirelessly for about 14 months on a freelance site for a local public school. I got a text from her shortly after they had released the site, it was a simple one line text:
"14 back breaking months of work and compromising to get a good design, and they destroyed it all within an hour of releasing the site." with a link to the site; which had a huge blinking text at the bottom of the site pointing users to their new interactive calendar.
> In fact I can't think of a single good design reason to ever animate an icon
I can think of a few cases where animated icons make sense.
1. Control feedback. If your icon deforms slightly under your mouse when you click, it provides extra feedback indicating that your action was registered.
2. Notifications. As you, yourself said, motion catches attention. So animated icons would serve well for any kind of event notification. New message or event, action completion etc.
3. Progress indication. An icon for something that takes a long time, like a file download, could be animated to indicate that the process is still ongoing.
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!
Also making the UI more live by doing a small animation on hover (or focus change) for those of us who still use mice and keyboards.
This helps distinguish clickable/interactive elements from static ones, and helps with discoverability.
Highlighting a row/column heading in a table under the cursor, or a border around a clickable element, etc goes a mile towards making the UI snappy, responsive, and human.
My most hated example of gratuitously distracting page decoration is the wriggling jizz scribbles on https://theoutline.com
The worst part is that you can’t get rid the incontinent piss dribbles by whacking the reader mode icon, because the shithead web developers load the whole magazine into one page so reader mode only shows the first article.
The developers of that site deserve to have their faces rubbed in my analogies, assuming that isn’t the kind of thing that gets them off.
> 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.
I disagree with this. It can be very effective at signaling users that this is something you want to click. I think some people take animations too far but when used properly, they can be very effective.
I think we should encourage the right kind of animations more than discouraging animating at all. Especially with SVGs, they are more optimized and that's the right way to go about animating something on the web (not a gif that is like 1.5MB).
I can think of a small set of cases where animations are useful. Icons, not directly being acted on are NOT those. Wholehearted agreement with you.
Among the exceptions:
- Sensory feedback. A hue/shade change on hover, and on click, can be useful. For action commands (as @Animats describes) some indication of the action performed can be useful.
- Pending / in-process actions. If you've kicked off something that takes more than a second or so to complete, then a subtle animation indicating activity can be useful. "Loading" animations fall under this. Though a first consideration should be to not require pending actions.
- Highlighting associated context, especially in help / support scenarios. If you're describing an icon, then, yes, go ahead and have it animate then and only then as a finding aid.
- Data visualisations. No, not icons, but presentations showing some level of change that can be represented as in time. Here, SVGs can be useful (though also abused). Interactive charts, animations, etc., when directly engaged with (animate-on-hover is a CSS hack I've long applied to GIFs, though that's achieved by rendering all GIFs tansparent unless hovered).
But the whole notion that icons should sit spinning on your page when you're doing nothing with them? Nope nope nope nope NOPE!!!
If sites start doing that routinely, I'll simply block SVGs on them. Breakage be damned.
(TFA itself was virtually unreadable for me for just this reason.)
A use case I can think of is weather icons. Carefully designed icons on maps can help convey the difference between a shower and a heavy rain for instance.
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'm cautious, and animation will almost certainly make icons worse before it makes them better, but I can see potential improvement, and I'll always err on the side of expanding toolsets.
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.
Regarding your extra note #1: even here, I think animation should be avoided like the plague. Animation to indicate the connection between UI elements is a design crutch which adds latency and makes for a sluggish experience for experienced users.
Counterexample: games. From slowly brewing health indicator in Diablo to shiny coin icons, animations are another one of told that can drive immersion.
But I completely agree with you in regards with websites and productivity apps, of course.
Can't you control how many times something animates for with CSS? I don't think I've come across a site where there's infinitely looped animated SVGs or been heavily distracted by them.
Problem is, the more intrusive an ad, the more likely it is to get blocked. Google is a pretty big player in the ad industry, and their ads are far from distracting.
"animated SVG blocker" seems like a very easy plugin to develop.
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.
The performance issues are what prevented me from using SMIL. A project I was working on called for an SVG animation that we also had to move on scroll (don't ask...). The animation was choppy and definitely got the fans spinning.
Swapping that out for the equivalent CSS animation and everything was smooth as butter. It's obvious that SMIL performance is not as important to the browser makers than CSS animation performance.
I had the opposite experience a few years ago, where SMIL performed better than CSS animation but it likely varies depending on what is animated. Problem was only that certain browsers at the time (old Edge for ex.) didn't support it. Thankfully Chromium and FF continue to support it. It has its place and also has supported features CSS has only fairly recently begun to see equivalents for (eg: motion paths).
> For maximum styling control, SVGs must be inlined
This was a real sticking point for me since editing and version-controlling a standalone SVG file is easier. I've had success with using Javascript to inline SVGs: https://github.com/jonnyhaynes/inline-svg
> SVG animations often cause enough CPU load to spin up laptop fans.
Yeah I really don't know why the article claimed animated SVGs are performant. They aren't. SVGs are incredibly slow to render, and asking them to animate is murder as a result. There's no acceleration for them at all, entirely CPU-rendered (slow) and then needs to be uploaded to the GPU for the rest of the otherwise GPU-rendered or at least GPU-composited scene (also slow).
Trying to do any of this on mobile, with extremely high resolutions, is going to absolutely tank performance.
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.
The SVG + CSS is really clumsy combination. The SVG exists outside web technologies as vector image format, where CSS would be horrible choice. The combination of overly verbose XML and inadequate CSS, each with its own idiosyncrasies creates too much mental overhead for developers. Looking at some online examples, I would hate to work on project that uses this combination.
There is also JS animation option which has many flaws. I guess it is impossible to accelerate on GPU, it forces imperative instead of declarative animation style and you have to execute someone's code in order to show graphics/animation.
I don't think SMIL (or even SVG) is perfect, but it is still the best option for open vector graphics standard. Maybe a much smaller subset would be something all mayor players could agree to support? The transpiler to shader language would be a good solution for performance issues.
> You cannot modify most attributes via CSS if they're loaded as an image.
You can't modify the attributes with CSS outside of the IMG, but CSS embedded in the SVG still works.
I use SVGator to create animated SVG and it exports an svg file with embedded animation via css animation / transform, they work great as <img src=".svg">
you can inline external SVG files with SVG injection. Works pretty well and almost feels like working with normal images. Here is an open source SVG injector: https://github.com/iconfu/svg-inject
> There is no SVG support in email, so using SVGs in an environment that has both web and emailed pieces can mean duplicate assets.
FWIW, Thunderbirds displays svg sent as attachments inline at the bottom.
Whatever you do, of course, do not break plaintext email. I only use plaintext emails.
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.
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)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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).
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).
> 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.
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.
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?
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.
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)?
> 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.
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.
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).
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.
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.
> 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.
Short answer: Adobe (and their Photoshop) is pretty much the reason Fireworks never got better traction.
Longer answer:
Fireworks was originally a Macromedia product. Back when it was released, from what I recall, it was in fact getting some pretty reasonable traction: in many folks eyes, it was a good upcoming web graphics tool, by the folk who made Flash (which actually had many fans back then). It was cheaper than Adobe's Photoshop, and addressed a different use case, and in those cases it certainly had better workflow.
Then Adobe acquired Macromedia. Fireworks pretty much got back-seated, most probably because Adobe already had a flagship 2d/photo graphics editor. A tiny handful of Fireworks' features made it into Photoshop. And Fireworks got a small amount of integration with the rest of the Adobe suite. But Adobe never really promoted Fireworks. And AFAIK they simply never put any resources (developers) into Fireworks.
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).
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.
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.
What kills me is that literally nothing (inc Photoshop) will import a .fw.png file and keep it editable. I know it's using some kind of proprietary extension to the PNG format, and that some gradients and textures would inevitably be Fireworks specific, but it'd still be useful to be able to open an old mockup and tinker with it.
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:
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.
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.
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
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?
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.
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.
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.)
A side issue is that non-trivial SVG authoring is painful to do by hand, so most people use some tool to do it. But the exported SVG will work on the rendering engine of the tool, not necessarily wherever it gets rendered downstream, and it can be difficult to know which features of your tool will result in rendering issues downstream. And sometimes the error is just missing content, others (like filters) often render the image completely black.
It's like using a compiler that supports one version of an architecture and you need to learn what you can/can't do in the source code that will result in illegal instructions anywhere else.
While Sketch is (imo) the best editor I've ever used for SVG it's also the worst about using weird SVG features that are poorly supported outside like, Safari and Chrome (I think they use the former).
This doesn't match my experience but maybe I'm in a bubble: for open source design and fabrication work, svg is basically as standard as pdf, I'll often convert pdfs to svgs to extract vector art and send it to another process, including 3D mesh editors that can extrude from svg files.
The editor I install on every machine and teach other people to use is Inkscape. The learning curve really isn't that bad, I've seen many kids really take off with it.
Inkscape is so overwhelmingly popular for SVG illustrations on Wikimedia that they've seriously considered just using headless Inkscape as the standard SVG rendering backend, instead of rsvg.
Wordpress is a significant part of the internet (hobbyist and small business definitely) and it still blocks SVG by default due to security concerns because SVG images (like fonts) are essentially scripts/programs, not images.
There are various potential vulnerabilities due to this and you can sanitise images or use correct headers to mitigate the issues, but it's easier for many to just say no and sidestep the issue.
> 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.)
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.
There are plenty of people who do know how to create good SVGs, but my first thought when I read the title was: maybe the people who know how, also know it's better not to.
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:
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.
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?
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)
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
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.)
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 really easy to write messy beginner code in.
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.
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.
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.
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.)