
Where are all the animated SVGs? - knowingathing
https://www.getmotion.io/blog/where-are-all-the-animated-svgs/
======
crazygringo
_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
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!

~~~
romwell
> * Confirmation of a user action

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.

~~~
dmitriid
For that, you shouldn't disguise interactive elements as static ones. To begin
with ;)

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

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

~~~
refset
I think reversible SVG animation on scroll effects _can_ be quite neat, e.g.
[https://www.opencrux.com/](https://www.opencrux.com/)

It's far preferable to most scroll-related effects I've seen.

~~~
lowdose
Smooth as butter!

------
jazzyjackson
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
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)

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

~~~
kevin_thibedeau
You can do nice things with hover events without creating a distracting mess.

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

------
dekhn
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
No need to wonder: http//doc.qt.io/qt-5/wasm.html

~~~
sgerenser
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).

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

~~~
pier25
Unless you were doing pretty complex stuff $10k per animation is quite
expensive. I’ve see full animation projects made with less than that.

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

------
Jerry2
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
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
Synfig now includes a Lottie exporter:
[https://www.synfig.org/2019/12/27/whats-coming-to-
synfig-1-4...](https://www.synfig.org/2019/12/27/whats-coming-to-
synfig-1-4-0-part-2/)

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/)

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

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

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

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

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

------
squared9
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-1YvU5IV3Rb8zd...](https://drive.google.com/drive/folders/14DKPte-1YvU5IV3Rb8zd2ptRjzSFDvIO?usp=sharing)

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.

------
chewxy
I used an animated SVG to explain backpropagation:
[https://blog.chewxy.com/2016/12/06/a-direct-way-of-
understan...](https://blog.chewxy.com/2016/12/06/a-direct-way-of-
understanding-backpropagation-and-gradient-descent/)

It was A LOT of work

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

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

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

~~~
sandGorgon
Lottie is not just used on Airbnb apps.

------
dreamcompiler
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?

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

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

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

~~~
mjw1007
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.)

~~~
steerablesafe
SVG support is abysmal, most browsers don't even support linearRGB color
interpolation in gradients (or elsewhere).

[https://www.w3.org/TR/SVG11/painting.html#ColorInterpolation...](https://www.w3.org/TR/SVG11/painting.html#ColorInterpolationProperty)

------
switchstance
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/)

------
rutierut
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)

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

------
bobblywobbles
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?

------
EGreg
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)

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

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

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

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

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

------
tumultco
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/)

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

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

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

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

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

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

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

------
Waterluvian
What does it add?

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

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

------
jaeh
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
Lubuntu?! xD Talk about lamenting the state of things.

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

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

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

~~~
acephal
Could you expand on this?

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

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

~~~
dessant
Windows 10 does the same for most newly released executables.

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

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

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

~~~
32gbsd
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/](http://owensoft.net/v4/item/2572/)) but
thats basically what happened

~~~
egypturnash
_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.

~~~
32gbsd
I really need to go back and clean up that article but I got so much hate for
talking crap about as3 that its pretty much pointless.

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

~~~
32gbsd
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.

~~~
egypturnash
_checks_ oh it's the "Charges Against AS 3.0" link near the top of the
footnotes.
[https://web.archive.org/web/20080828162816/http://www.inside...](https://web.archive.org/web/20080828162816/http://www.insideria.com/2008/07/the-
charges-against-actionscri.html) is the full article.

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

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

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

------
fnord77
6\. animated things on the screen are annoying

------
miguelmota
Wish there was Linux support to try it out

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

