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?)
The new hotness is "neumorphism": https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf...
You're going to love this.
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.
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 am sure there are other examples.
* 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.
Hopefully this trend will pass much like the Photoshop layer effects (bevel emboss, drop shadow, etc) which were everywhere in the late 90s early 00s.
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.
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.
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).
And the constant flashing of colors and backgrounds all over the page as you move the mouse is extremely distracting.
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.)
In the attention economy, that is almost always the goal.
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.
But I completely agree with you in regards with websites and productivity apps, of course.
This could be very useful for game development especially with the popularity of PWA.
I develop ads for a living. A tool like motion is a GODSEND in this industry.
"animated SVG blocker" seems like a very easy plugin to develop.
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.
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.
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.
Also, I can't agree with "Let's not just do this because we can." enough.
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.
After all, we only got rid of animated GIFs not too long ago.
[under-construction.gif]
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.
* 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.
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.
It's far preferable to most scroll-related effects I've seen.
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
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.
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">
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.
So I use Thunderbird, with no HTML, images or remote resources.
And there's a site that, every week, sends me this message:
> Please view this email in an HTML compatible email client.
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.)
https://www.w3.org/TR/SVG11/painting.html#ColorInterpolation...
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).
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.
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.
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.)
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.
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).
~~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.
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.
stroke-dasharray: 422px, 422px;
stroke-dashoffset: 0px;
fill: rgba(255, 255, 255, 0.333);
https://product.voxmedia.com/2013/11/25/5426880/polygon-feat...
Has been used in production over hundreds of millions of devices
you could just download from the thousands here - https://lottiefiles.com/
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.
https://www.pcmaffey.com/roll-your-own-analytics
https://www.pcmaffey.com/finally-i-closed-my-linkedin
https://www.astronomer.io/404.html (let this play > 1 minute)
You can open any of these images and View Source to dive in to the implementation... except for Edge, SMIL plays exactly the same in all browsers, whereas I've found using CSS to drive the animations has varied results (especially in Safari) and worse performance.
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?
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.
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)?
Pencil 2D
Synfig Studio
OpenToonz (used by Studio Ghibli, no less!)
If you want 3D, then Blender is a fantastic open source tool.
It is in the 1.3.12 release.
There is also this new tool called enve (Linux only): https://maurycyliebner.github.io/
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.)
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.
Kinda seems like the blog post was just there to sell the app, which is just there to sell 'premium' icons.
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.
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.
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.
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!
> 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.
Some samples of our work here: 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.
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.
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.
It was A LOT of work
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.
I, for one, am exceedingly happy that the web isn't filled with this stuff.
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.
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?
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)
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 for an easier animation creation framework but would rather not have a bootstrap-like library for animations.
The shape morphing intelligently figures out the best morph such that the from- and to- shapes can have vastly different control points.
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 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.
Although, hardly anybody is littering their webpages with animated gifs, so maybe we've just grown tired of tiny animations.
Always refreshing to see this as the motivation for an article.
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.
