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.
Where are all the animated SVGs?
21–30 of 200 posts
Re: Where are all the animated SVGs?
#22SVGs 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.
[deleted]
Re: Where are all the animated SVGs?
#23I, 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.
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.
Re: Where are all the animated SVGs?
#24I'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.
Re: Where are all the animated SVGs?
#25I’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.
Re: Where are all the animated SVGs?
#26I 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-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.
Re: Where are all the animated SVGs?
#27I, 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.
> 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]
Re: Where are all the animated SVGs?
#28I love SMIL animations. If you're curious about what you can do, here's a few examples:
https://www.pcmaffey.com/roll-your-own-analytics
https://www.pcmaffey.com/finally-i-closed-my-linkedin
https://www.astronomer.io/404.html (let this play > 1 minute)
You can open any of these images and View Source to dive in to the implementation... except for Edge, SMIL plays exactly the same in all browsers, whereas I've found using CSS to drive the animations has varied results (especially in Safari) and worse performance.
Re: Where are all the animated SVGs?
#29Because we wouldn't want mere icons distracting the user from being distracted by all the other stupid animations in the average UI.
Re: Where are all the animated SVGs?
#30I 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?