Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

The State Of Animation 2014

The post-Flash era is hardly free of animation. CSS animation is quickly becoming a cornerstone of user-friendly interfaces on mobile and desktop, and JavaScript libraries already exist to handle complex interactive animations. In the wake of so much “CSS versus JavaScript animation” infighting, a new API specifically for web animation is coming out that might just unite both camps.

Further reading on Smashing: Link

It’s an exciting time for web animation, and also a time of grave miscommunication and misinformation. In 2014, I had the chance to travel the world to talk about using animation in user interfaces and design8. I met and interviewed dozens of people who use and champion both CSS and JavaScript. After interviewing so many developers, designers and browser representatives, I discovered a technical and human story to be told.

What you’re about to read is purely observational and as unbiased an account as you will be able to find on the subject of web animation.

Flash May Be Gone, But The Era Of Web Animation Has Just Begun Link

Since the era of Flash, it’s become fashionable to think of animation as little more than decoration, a “flashy” afterthought, often in poor taste, like an unwelcome blink tag. But unless we want to display nothing other than copy on a screen, animation is still very much our friend.

For user interface designers, animation reinforces hierarchy, relationships, structure, and cause and effect. Research going back to the early ’90s9 demonstrates that animation helps humans understand what’s happening on screen. Animation stitches together app states and offloads that work to the brain’s GPU — the visual cortex.

For interaction developers, complex visuals — from infographics on dashboards to video games on tablets — are impossible to create without animation to glue all the pieces together. If we want those things on the Internet, we still need animation.

Sadly, we have fallen behind in the motion design race. Products that use animation to benefit their users will succeed where their static or animation-abusing competitors will fail. As it stands, native apps are beating the pants off the web. App developers have been incorporating animation into their designs and fleshing out workflow and prototyping tools like Flinto10 and Mitya11 from day one.

But things might be turning around. iOS’ Safari team pushed out the CSS animation and transition specifications so that websites can look and feel as good as iOS apps do. Even Google has picked up on this, putting animation front and center12 in its Material Design recommendations, with careful do’s and don’ts to apply animations and transitions meaningfully, with purpose.

Animation is the natural next step in the evolution of our application and device ecosystem. It makes the digital world more intuitive and interesting for users of all ages. And so long as our devices sport GPUs, it’s not going away.

Animating All The Things Link

At its core, animation is just a visual representation of a rate of change over time and space. All animation can be distilled into three types:

Static animation runs from a start point to an end point, with no branching or logic. This can be accomplished with CSS alone13, as the abundance of CSS loading animations14 testifies.

Static animation

Stateful animation in its simplest form takes boolean input — a click to open a menu and a click to close it15, for instance — and animates between the two states. This is currently achieved in JavaScript frameworks by applying and removing classes with scoped CSS animation.

Stateful animation

Dynamic animation can have many outcomes depending on user input and other variables. It uses its own logic to determine how things should animate and what their endpoints are. It could entail “dragging” a page along behind your finger according to the speed of your swipe, or dynamically changing a graph as new data comes in. This is the trickiest kind of animation to accomplish with the tools at our disposal today. CSS alone cannot be used for this kind of animation.

Dynamic animation

More States != Dynamic Animation Link

The astute CSS developer might point out that, with enough states, CSS animation could closely resemble dynamic animation. This is true to a point. But truly dynamic animation has more end states than you can possibly anticipate.

More States != Dynamic Animation

Just imagine the humble loading bar. Having a different class for every percentage point of “fullness” would easily run to a hundred lines of CSS, not to mention the number of times your JavaScript would have to touch the DOM to update the classes and the browser repaints. We definitely could write a more performant dynamic loader with JavaScript alone.

CSS animation is declarative: Aside from a handful of pseudo-classes, such as :hover and :target, it accepts context from neither the user nor the user’s surroundings. It does only what its author tells it to do and cannot respond to new inputs or a changing environment. There’s no way to create a CSS animation that says “If you’re in the middle of the page, do this; otherwise, do that.” CSS doesn’t contain that sort of logic.

When CSS-first developers need logic, they often start by scoping CSS to state classes, with JavaScript handling the logic of when to apply which class. Frameworks such as AngularJS16 support states, and many UI interactions adapt easily to a handful of states like “loading,” “open” and “selected.” These animations also degrade gracefully in old browsers, providing a much needed UX boost where CSS animation and transitions are supported.

05-ui-vs-ixd-opt

Interaction developers have had a different time of it. CSS animation is often too declarative to handle the things these developers want to build. Paying clients demand reliable animation across a wide spread of browsers; so, many interaction developers and their studios have done what all clever developers do: make labor-saving libraries customized to their own processes. Some of these libraries, like GSAP17 and Velocity4118, are available to and developed for the public. But many others will never be released in the wild, because the people and agencies who created them don’t have the time or money (or will) to support an open-source project.

06-client-work-opt

This is a deeply worrying story that I’ve heard over and over again, and it suggests that many developers are reinventing the wheel without moving the web forward. There isn’t enough demand for something considered “nice to have” to support many competitors. It’s easy to see how libraries like GSAP must be commercial in order to survive, or how sponsorships buoy libraries like Velocity.

07-flash-rule-opt
And Flash was a benevolent dictator, for its people did have a visual timeline UI.

Flash did a great thing by giving interaction developers and UI designers a universal workflow that accommodates all kinds of animations and a platform on which to edit them. But since Steve Jobs announced back in 2010 that the iPhone would never support Flash19, many former Flash developers have quietly gone into exile, taking their niche knowledge with them. Now, an entire generation of web designers has come online with relatively no knowledge of the possibilities and challenges we face when ramping up animation complexity.

But things are about to get quite… animated.

The Web Animation API: The Greatest An API You’ve Never Heard Of Link

The Web Animation API is a W3C specification that provides a unified language for CSS and SVG animations and that opens up the browser’s animation engine for developer manipulation. It does the following:

  • provide an API for the animation engine, enabling us to develop more in-browser animation tools and letting animation libraries tap into performance boosts;
  • give (qualifying) animation their own thread, getting rid of jank;
  • support motion paths20;
  • provide post-animation callbacks;
  • reintroduce nested and sequenced animations21 that we haven’t seen since Flash;
  • enable us to pause, play, seek, reverse, slow down or speed up playback with timing dictionaries22 and animation player objects23.

Here’s just one example of what the Web Animation API can do that CSS alone cannot24.

See the Pen Running on Web Animations API25 by Rachel Nabors (@rachelnabors26) on CodePen27.

Support Link

The Web Animation API has been over two years in the making, and its features have been rolling out in Chrome and Firefox nightlies for the past six months. Mozilla is the major force behind the specification. Meanwhile, the Chrome team has been prioritizing the shipment of features.

Microsoft has the API “under consideration”28 for Internet Explorer. Apple, surprisingly, has also adopted a wait-and-see approach for Safari. And we can only fantasize about when the API will hit those web app engines powered by ancient forks of open-source browsers29.

Early adopters who want to explore the API can try out a polyfill for the Web Animations API30, which is being replaced by Web Animations Next31 literally any day now (more about the polyfill and the API can be found on the website for the Polymer project32). However, for browsers that don’t support the API, the polyfill is still less performant than GSAP, the reigning champion of JavaScript-based animation libraries. Thus, the polyfill isn’t something interactive that developers will want to put into production for high-performance projects.

It will be some time before this API is supported across the board. With half of browser makers waiting to see how developers will use it and most developers refusing to use a tool that isn’t widely supported, the API faces a chicken-and-egg scenario. However, in an on-stage conversation with Google’s Paul Kinlan at Fronteers, I suggested that, were the API to be fully supported in a closed and monetizable system for web apps, such as Google Play, developers would be able to safely use it in a walled garden until it reaches maturity and fuller support.

Performance Link

The API’s authors and implementers hope that animation library developers will start feature-sniffing for the API’s support to tap into its performance benefits. Because the Web Animation API uses the CSS rendering engine, we can expect CSS levels of performance. Animations will run on their own thread as long as they don’t depend on anything happening in the main thread, such as JavaScript or layout.

Speaking of layout, reflowing remains one of the biggest processing hurdles for browsers. No CSS or JavaScript animation can get around it unless you’re pumping everything through WebGL straight to the GPU (which some clever in-house library developers have been doing). Aside from opacity and transform, animating the bulk of CSS properties will cause a reflow, a change in layout and/or a repaint of the pixels on the screen. The will-change CSS property helps some33 by enabling us to point at something and tell the browser, “That, that thing is going to change. You do what you have to do change it efficiently.” The hope is that as browsers get smarter about graphics, they’ll move those elements into their own layer or otherwise optimize the way they handle those graphics. It’s the first step in eliminating hacks like translateZ(0).

Such “performance hacks” often get slapped on as a magic fix whenever an animation is janking, but they often cause performance issues when used unwittingly. Performance decisions are truly best left to the browser in the long run. Fortunately, browser makers are scrambling to get fewer properties to trigger reflows, thus keeping them off the main thread. For animation library developers, this means that the Web Animation API could be a winning partner for performance in the near future.

Tools Link

Anyone working with web animation yearns for proper animation development tools: a timeline, property inspection, better editors, and the ability to pause, rewind and otherwise inspect an animation while debugging. The Web Animation API will open the guts of the CSS rendering engine to developers and the browser vendors themselves to create these tools. Both Chrome34 and Firefox are preparing animation features for their development tools. This API opens up those possibilities.

The Web Animation Community Today Link

Not many people other than those working on it are aware of the Web Animation API. The standards community is eager for real-world feedback from interaction and animation library developers. However, many developers feel that the standardistas live in an ivory tower, far removed from the rigors of the trenches, the demands of clients and the lessons learned from Flash.

08-flash-exile-opt
The old king’s champion sent into exile by the very people he once served.

To be fair, the standardistas haven’t exactly come out to meet their audience in the field. To join the “official” Web Animation API conversation, you must jump through some hoops, and getting on the email chain threatens to overflow the inbox of any busy developer. Alternatively, you could get on IRC and join the conversation there — if only designers used IRC. The conversation that needs to happen is unlikely to happen if the people who have the most to say simply aren’t there. Vendors and specification authors will need to find more ways to reach out to their key audience or else risk building an API without an audience.

But the standardistas aren’t the only ones with communication problems here. As a community, we are very judgmental and quick to deride things that we deem unworthy, be it Flash or an API we don’t like the look of. Many of us invest our egos in our tools and processes. But those things don’t define us. What we create together defines us.

  • Animation library developers, read the specification35. It is long, but if GreenSock’s Jack Doyle can do it, so can you.
  • Interaction developers who don’t have all day to read a huge specification, just read the readme on the polyfill’s page36. It’s a perfect TLDR. Now that you know what’s coming, you will know when it might be useful to you, whether for optimizing your library’s performance or building an in-browser timeline UI.
  • Designers, prioritize JavaScript at work. Play with the polyfill, and play with GSAP and Velocity. Find out what these things can do for your work that CSS alone cannot accomplish.

With web animation, we have a rare chance to put our egos aside and come together as a community to build a tool with which future generations of designers and developers can build great things. For their sake, I hope we can.

“The art challenges the technology, and the technology inspires the art.”

– John Lasseter, CCO Pixar

Resources Link

Rachel Nabors has an updated list of resources on the Web Animation API. To join the unofficial conversation, look for the #waapi hash tag wherever you prefer to communicate.

Join the Conversation Link

Make a Difference Link

People who have some familiarity with C++ coding can help implement the API in Firefox44. Brian Birtles45 might even mentor you! And Mozilla is always looking for people to help write documentation on MDN46.

Minor corrections to the specification (grammar, spelling, inconsistencies, etc.) can be submitted as pull requests on GitHub47.

People to Follow on Twitter Link

(al, ml)

Footnotes Link

  1. 1 https://www.smashingmagazine.com/2015/12/animating-clipped-elements-svg/
  2. 2 https://www.smashingmagazine.com/2015/09/creating-cel-animations-with-svg/
  3. 3 https://www.smashingmagazine.com/2015/06/practical-techniques-on-designing-animation/
  4. 4 https://www.smashingmagazine.com/2011/10/quick-look-math-animations-javascript/
  5. 5 https://www.smashingmagazine.com/2015/05/functional-ux-design-animations/
  6. 6 https://www.smashingmagazine.com/2015/06/creating-advanced-animations-in-photoshop/
  7. 7 https://www.smashingmagazine.com/2015/08/animating-in-keynote/
  8. 8 http://www.slideshare.net/CrowChick/animation-and-the-future-of-ux-33573726
  9. 9 https://smartech.gatech.edu/bitstream/handle/1853/3627/93-17.pdf
  10. 10 https://www.flinto.com/
  11. 11 http://www.mitya-app.com/
  12. 12 http://www.google.com/design/spec/animation/authentic-motion.html
  13. 13 http://codepen.io/rachelnabors/full/rCost
  14. 14 http://codepen.io/collection/HtAne/
  15. 15 http://tympanus.net/Development/SimpleDropDownEffects/
  16. 16 https://docs.angularjs.org/api/ngAnimate
  17. 17 http://greensock.com/
  18. 18 http://julian.com/research/velocity/
  19. 19 https://www.apple.com/hotnews/thoughts-on-flash/
  20. 20 http://dirkschulze.github.io/specs/motion-1/
  21. 21 https://github.com/web-animations/web-animations-js#sequencing-and-synchronizing-animations
  22. 22 https://github.com/web-animations/web-animations-js#controlling-the-animation-timing
  23. 23 https://github.com/web-animations/web-animations-js#playing-animations
  24. 24 http://codepen.io/rachelnabors/pen/zxYexJ/
  25. 25 'http://codepen.io/rachelnabors/pen/zxYexJ/'
  26. 26 'http://codepen.io/rachelnabors'
  27. 27 'http://codepen.io'
  28. 28 https://status.modern.ie/webanimationsjavascriptapi?term=animations
  29. 29 https://developer.amazon.com/appsandservices/solutions/platforms/webapps
  30. 30 https://github.com/web-animations/web-animations-js
  31. 31 https://github.com/web-animations/web-animations-next
  32. 32 https://www.polymer-project.org/
  33. 33 https://dev.opera.com/articles/css-will-change-property/
  34. 34 http://src.chromium.org/viewvc/blink?view=revision&revision=183847
  35. 35 http://w3c.github.io/web-animations/
  36. 36 https://github.com/web-animations/web-animations-js#readme
  37. 37 http://w3c.github.io/web-animations/
  38. 38 https://github.com/web-animations/web-animations-js
  39. 39 https://github.com/web-animations/web-animations-next
  40. 40 http://greensock.com/
  41. 41 http://julian.com/research/velocity/
  42. 42 mailto:public-fx@w3.org
  43. 43 http://irc.w3.org#webanimations
  44. 44 https://developer.mozilla.org/en-US/docs/Introduction
  45. 45 https://twitter.com/brianskold
  46. 46 https://developer.mozilla.org/en-US/
  47. 47 https://github.com/w3c/web-animations
  48. 48 http://twitter.com/brianskold
  49. 49 http://twitter.com/alexanderdanilo
  50. 50 http://twitter.com/tabatkins
  51. 51 http://twitter.com/greensock
  52. 52 http://twitter.com/rachelnabors
  53. 53 http://tinmagpie.com/

↑ Back to top Tweet itShare on Facebook

Rachel Nabors is an interaction developer and award-winning cartoonist. She travels the world, speaking about and training teams in the art of web animation. When not biking around her home city of Portland, she makes interactive comics at her company Tin Magpie. You can catch her as @rachelnabors on Twitter and at rachelnabors.com.

  1. 1

    Nice article!

    5
  2. 2

    You do not even realize how much i like your blog. I found it “by accident” today, but I think that I will stay here for longer ;)

    Once in the history (maaaaany years away) I was giving animation a shot. But I have quickly realized that I am more a drawer – making moving objects (especially using PC software) is not for me.

    2
  3. 3

    Patrick Brosset

    November 18, 2014 9:59 pm

    Great article Rachel. I really enjoyed reading it.
    If anyone is interested the work for better web animations tooling in Firefox is starting to happen here: https://bugzilla.mozilla.org/show_bug.cgi?id=985861

    0
  4. 5

    Your polyfill doesn’t seem to work on the latest Chrome. (38.0.2125.122) The cat animations continue to run out of sync.

    -5
  5. 6

    Just wanted to say this post helped validate the past 5 (almost 6) years of my life.
    After numerous discussions with people (confused clients, supervisors, etc.) regarding phasing Flash out, and accomplishing similar animated displays using Jquery, sprites, and CSS3, it’s great to see that “the industry standard” is no longer the bane of my existence.

    I was stubborn enough to start abandoning Flash in 2010 (started dabbling with Adobe Edge beta releases), and the day has come when others can comfortably do the same, and not fear being left behind.

    I mean seriously, why wouldn’t you want to use the languages you’re already coding with on your site(s) to add a little animation? It always made more sense to me than forcing people to download (and update) plugins, while always having to code for a fallback.

    I’ll definitely be taking a deeper look into the API!

    4
  6. 7

    Fellow Flasher in exile/denial.

    0
  7. 8

    Super članek Rachel . Res sem užival v branju .

    -6
  8. 9

    Great article, Rachel.

    Might check out the Web Animations API, although I’m one of those developers that needs proper support first to accept it into my daily coding..

    Also, thanks for clearly explaining all the different types of animation as I previously had no way to refer to them properly.

    -1
  9. 11

    Nice write up Rachael. I have a good resource to add to the list — useyourinterface.com. Particularly from a comparative research point of view, it has a large collection of live working animation examples found around the web.

    2
  10. 13

    Nice article and glad to see GSAP held so highly. I’ve implemented GSAP in our HTML5 banner work at our agency, having built a non-intrusive timeline-control (and other additional tools) that wrap the banner via PHP for development and review (using TImeline Max). Can’t say enough good things about GSAP and how it’s made creating some very complex banners our clients want, plus the community over there is astounding.

    5
  11. 14

    Awesome article!

    Why don’t you mention famo.us though? :)

    1
    • 15

      Very good question.

      0
    • 16

      I interviewed many, many people while researching this article. Non of them used Polymer nor could definitively tell me what it is. Maybe if it gains more traction it will get mentioned in State of the Animation 2015 :)

      0
  12. 17

    Nice article! The article is missing mentions of Famous and Famous-Angular next to GSAP and Velocity.

    http://famo.us
    http://famo.us/angular

    Famous-Angular, as you can imagine, gives you a declarative, data-bound animation framework by combining Famous with Angular.

    There’s also Famous-Views for Meteor, a Famous-Meteor integration.

    http://famous-views.meteor.com

    These three libraries are game changers. Famous alone has twice the stars that Velocity has on GitHub, and 5 times the stars that GSAP has on GitHub, and growing at a much faster rate.

    Check out this nice demo, made with Famo.us:

    http://codepen.io/befamous/full/kbxnH

    Famo.us belongs in this article.

    0
    • 18

      Why was this and so many other helpful comments marked down? This post’s comments are a gold mine. A grumpy former flash dev? (Spoken as a Flash refugee myself)

      0
    • 19

      I stumbled on the “Famo.us University” tutorial section; it looks very thorough and accessible:

      http://famo.us/university

      Given two libraries that are close in performance and capability, documentation and learnability wins when it comes to actually getting used.

      1
  13. 20

    Does css3 keyframe step animation support multiple row animation without JS?

    -2
  14. 21

    Thomas Williams

    November 20, 2014 1:26 am

    I see we are still burying Flash. Perhaps Rick Grimes and crew could make sure it stays dead this time. ;>

    ~Thomas

    -3
  15. 22

    In the example (http://codepen.io/rachelnabors/pen/07a15e72c5a3d999d0794603a04d7323), how does this line work?

    var catRunning = withWAAPI.animate(keyframes, timing);

    In particular, what is ‘withWAAPI’? I realized that’s the cat div id, but how does this work?
    I’d expect something more along the lines of:

    var cat = document.getElementById(‘withWAAPI’);
    var catRunning = cat.animate(keframes, timing);

    1
  16. 24

    One of the best articles I have read on Web Animation…thanks for sharing your knowledge…

    One of the things I truly miss from the Flash days was a nice GUI developing Animations…you could really have fun creating and experimenting with animation in a visual way…Coding animations can be difficult for many designers…

    I Dream for a visual tool that outputs Web Standards CSS animation and / or JavaScript animation code…If not for production then at least for prototyping…

    Anyways great article…

    -1
    • 25

      I share your dream, Michael, as do many others. Hopefully, the Web Animation API will let us build those tools… in the browser… I can’t wait!!

      0
  17. 26

    Nice article rachel, I am not aware of the web animation API until I read this. Thank you. Yeah its nice to have something to do the animation things.

    -1
  18. 27

    Pedro Ivo Hudson

    November 23, 2014 2:03 pm

    I did this a while back: http://thegoodman.cc/
    I intend to update it with the current animation state.

    Great article! Thanks for sharing!

    0
  19. 30

    I can’t wait for something to happen so that every site made in the last 6 months and beyond don’t send the fan on my brand spanking new macbook pro go into hyperdrive and try taking off from the desk.

    -1
  20. 31

    I for one am truly happy that Flash has been banished from this earth. Sure, it was a fun time working with the program but in retrospect a lot of plain awful abolishments of websites were made with it. Custom cursors, automatic audio, loading screens, complete movies before the ability to start, no context menu’s, memory slurpers etc.

    But unfortunately, you see it coming back again. Video backgrounds, parallax festivals, page loaders (!@#!) and full page backgrounds that aren’t compressed are already a sign things are getting worse again.

    With great power comes great responsibility, and most of us or our clients can’t handle it. Websites should inform in the first place, entertain as a second. This simple notion often seems too much to ask for.

    -7
  21. 32

    Great article. I’ve been digging more and more into animation since I saw your talk at CSS Dev Conf, but this just gave me so much more context.

    Definitely going to start digging into the Web Animation API now…

    -1
  22. 33

    Thanks for writing Rachel! I used to be in the camp of only doing CSS animations. Now that I am working on a robust web app, I am seeing the need for much more powerful animation frameworks. So we are using tools like Velocity to build out more complex animations. But yes, I would totally love to see web apps and sites catch up to mobile apps in terms of the usability and beauty of their animations.

    0
  23. 35

    Great & thanks for sharing!

    0
  24. 36

    Is there any examples for the Dynamic Animations?

    0
  25. 38

    Great article! Insightful, original and detailed. Especially liked the explanation on 3 types of animations

    1
  26. 39

    inderpreet Singh

    November 30, 2014 3:08 pm

    I was teaching myself flash animation and game dev for months before I realized that flash is going away. I did some work in it before I had to say a painful goodbye to my flash days and move on with other things. I would give anything to have that awesomeness back, to use my learned animation skills on web and enjoy it across all the devices.
    Joining mailing list and IRC to see where I could be useful. Thanks a lot for the article.

    1
  27. 40

    I don’t think it’s necessary to discredit Flash. In the hands of great developers, it could do amazing things with optimal performance. The trouble with Flash is its approachability. Noobs can get in there and build something half way functional far too easily. I think the Adobe Edge Animate and other Web animation tools will do the same with Web technologies. Whenever you put that much power into the hands of uninformed people, you will find people abusing that power.

    That said, I proud of the past ten years of experience gathered from Flash. It put me at an extreme advantage to those with no multimedia experience!

    2
  28. 41

    The purpose of the article is unclear: the bad new seems to be that yes, animation is a difficult and complicated matter…. By chance some obscure and dictatorial tool converted millions of artists and revolutionarized the web, but now it’s back to .. (almost) zero.

    The good news is that because of this article, backed by impressive reactivity of manufacturers, browser developers, specification-makers, web-developpers and animation-tool-makers, and hopefully (some day) graphic animators, animation will become easily feasible withing the 10 next years.

    Good news? :/

    1
  29. 42

    Flash Pro is a tool and you can use it to export to any format even for strange plateform like the standard web

    0
  30. 43

    We dont call it “exile” or “denial” – we call it building mobile apps and games with AIR.
    guys that still do flash, abandoned browsers – the guys that left flash, didnt. Its that simple

    Its not like we dont embrace opensource or we sit in some corner and rant over browsers. – We moved on to something else.

    The swf file format can rot, in our opinion. Cross compiling to win, mac, ios and android is the new thing until adobe either gives it the chair or in all hope and glory they open source it.

    I see flash as an aged and experienced man looking at his two grown up sons unity3D and html5. and maybe somewhere that man is most proud of one the sons.

    2
  31. 44

    It’s good to know that a new animation standard is coming, but in the meantime, don’t forget about the one you currently have: SVG 1.1.

    You can take a JS library like Snap SVG, combine it with the wonderful GSAP tools, and create some really amazing stuff. I am certainly one of those people who spent much of my career building Flash animated experiences for clients. Now I find myself looking for ways to bring the animation and subtle delight often found in top-shelf Flash motion design back into an HTML experience on desktop and mobile, and SVG is something that can achieve this goal today. “That’s great, but will it run on my phone?” I love saying yes to that question.

    I wish Adobe would focus on getting Flash to fully export to SVG as a publishing target with art, animation and code. The current SVG animation authoring workflow is not simple, no matter which tools you use.

    There are also libraries like Pixi.js that let you build wonderful animation as well (canvas-based), but if we’re discussing standards-based options, the SVG 1.1 standard is a great solution that is available to you right now.

    1
  32. 45

    Flash is years ahead of canvas or svg…

    In desktop and laptops, flash is king

    “The mobile experience…”

    The mobile experience is like trying to see and enjoy 2001 SPACE ODISSEY in a tiny iphone screen….

    The mobile experience is like trying to see and enjoy INTERESTELAR in a tiny iphone screen….

    Focusing in the mobile experience has killed web animation

    0
  33. 46

    I still believe that if not for all the bugs in Flash it would’ve still made a wonderful animation program today. A lot of people forget that it started out as true animation software that later became bloated when it was used to build websites. The introduction of Actionscript and merging it with Director’s Lingo was something Flash was never intended to be. That was one of the reasons for the death of Flash. Sort of how Photoshop was once a Photo application that later turned into website/development software. Once someone comes up with a better way to edit photos and stick to that core, bye-bye Adobe PS.

    CSS and HTML 5 animation still has a long way to go. I’ve tried to adopt it and have worked one two projects where we were building simple games. But it seem like a slow elementary step backward in the process. Even early days of Flash was a lot more intuitive. If the idea is to move development to the browser we will need browsers to catch up before being able to accomplish what you could do in Flash circa 1999.

    0
  34. 47

    We were designing and animating simply beautiful and fun banners and custom landing pages in Flash that we CANNOT DO with today’s ‘improved’ technology. Flash does not have a place for a full website design, but we really have gone backwards in some ways whilst the Steve Jobs of this world dictate the platform. We really do need a Flash replacement. I will NOT miss troubleshooting AS2 scripts, but I will miss the fun and funky animations we used to be able to deploy. Now when a client asks as ‘yes but can’t you make it work like that again’ it’s very difficult to explain why until we say ‘apple no longer supports flash’ and everyone sagely nods their heads and we go and propose something that works on ‘every device’. For the next few weeks, anyway….

    0
  35. 49

    I’m so glad I’ve kept this article in my “must read” queue for two weeks. There are lots of interesting points.

    0
  36. 50

    I miss Flash. It was just better. Better at everything.

    There. I said it.

    2
  37. 51

    Biju : www.bijudesigner.com

    January 12, 2015 8:59 am

    Nice article !

    0
  38. 52

    This might a good one for a start in maing your animation I highly suggest this here is the link:
    https://ihatetomatoes.net/how-to-animate-svg-with-greensock/
    Thanks and Cheers!

    0
  39. 53

    Bernard Meisler

    January 16, 2015 6:47 am

    Have you tried Grant Skinner’s CreateJS library? You can use it on your own – and it’s also embedded as a Publish method in the latest version of Flash.

    So you can do all the animations you ever did in Flash, then compile it using CreateJS, and it will output as HTML/Javascript. Then you can add all the Javascript coding you like, instead of Actionscript.

    I’m surprised more people aren’t using this. We do heavy duty interactive animation with it on a daily basis. Output complicated Flash animations, with interactivity, to Javascript. Works like a charm on iPads.

    CreateJS is great.

    1
  40. 55

    Matthew Trow

    March 26, 2015 8:30 pm

    Very timely article – I love the reality you’ve used in this article, the concept of the “in-house” dev/designer with a real workload, rather than pure theory.

    What we’re still missing is the killer app that both designers & developers can adopt that takes the code pain out of creating interactive meaningful animations.

    This is *why* flash was so incredibly successful – it appealed to *both* camps and all shades in-between. It was possible to create animation without requiring advanced coding techniques, or to create animation *with* advanced coding.

    It may feel like we’re right back at the beginning sometimes, but heck, that makes it so exciting – the sheer joy of producing subtle *meaningful* animation with css or javascript is leaps and bounds ahead of the proprietary plugin solution that flash afforded us.

    0
  41. 56

    Great article Rachel. For me the web was a more creative place 10-20 years ago with animation and interactivity. Static web pages do not connect with people in the same way. Pretty much every major luxury brand had a Flash website for a reason – enhanced user experience. Flash was the perfect software for certain jobs. And given the chance, Flash would have been perfect on the iPhone. The way the iPhone’s OS Ui works is all crafted with animation, enabling amazing user experience. Users love the way it reacts when touched. It’s navigation glides along – all made possible by beautifully intuitive animation. The Ui on the iPhone could easily have been made with Flash.

    Flash was amazing for building interactive apps, if the iPhone would have supported Flash the App store never would have succeeded. Flash simply conflicted with Apple’s ‘total control’ vision of the app store. So Steve Jobs killed off Flash for business reasons… we all know the story.

    The key thing is the necessity of animation and interactivity for websites, especially on smaller devices. They must have animation. Eight years ago on the 1st iPhone (2007) mobile websites didn’t really exist, visually site design returned to 1995. Recently new coding standards HTML5, CSS Animation (although basic) have transformed mobile web design by replicating what was achievable with Flash over 15 years ago.

    Just check Apple’s own website these days – it’s a Flash fest!
    Vive La Flash! I salute you.

    /* – – I’m a Steve fan, just disagree on the Flash thing – – */

    0
  42. 57

    I’m seriously tired of the “flash is dead” shit, its been going on for 5 years and flash is still used in animations. Steve Jobs thought he was the smartest guy for not letting iPads and iPhones to not support flash, and he was wrong. remember the “GIF is dead”, look how much it is used right now, lets face it, flash is not gonna die anytime soon.

    0

↑ Back to top