Animations On The Web: Which Technology Do We Use?

I’ve had this discussion with web developers in the past and specifically on Twitter/Facebook with some fellow developers, and realized that 140 characters just isn’t enough for my thoughts.

It wasn’t but a few years ago that I was taught the ways of js/jquery animations. Ever since then, the question has been going through my head, “Will the web community make JavaScript-based animations the way of the future?” What about all of the other technologies?

The Past

Before js-based animations were easy to use (via js frameworks), the prominent option out there was Flash. And boy, did everyone use it. I can personally say I never liked flash after learning it in college. As ignorant it was at the time, my reasons were “Flash is for people that don’t know how to code a site.” This was partially true, but Flash did and still does have a place in the web. Then there was the Steve Job’s initiative, and we all know, nothing gets in the way of what Steve wants. Granted, Steve has different motives for eliminating Flash than I did.

  • Too bloated to work on his simple iOS devices
  • A company that he is not CEO of controls the technology
  • Everyone wraps their video in Flash, so video doesn’t work on his device

Then there are my motives:

  • I don’t want to learn another technology
  • It’s slow and bogs down my machine
  • Flash is a huge security risk

Unfortunately, it took the adoption of Steve Jobs’ iPad for web sites to start thinking of alternatives for animations.

The Present

We all know that js-based animations have been around for quite awhile, but it wasn’t until frameworks like jQuery and MooTools came along, that they are much easier to implement. Now that there are easy-to-use frameworks, the learning curve for developers to learn is not quite as steep.

This takes care of a few of the points above, but not all of them. The biggest is security. After listening to the Security Now Podcast on the TWiT network, I’ve quickly learned through the teachings of Steve Gibson, that JavaScript is just as big as a security risk as Flash. Most exploits that happen on the web, are executed by js. So as a user, it is good practice to use your browser with js turned off. It doesn’t necessarily bug me that the small percentage of people disabling js in the browsers aren’t seeing my sweet animations, but more so that I’m encouraging bad security practices. This was what got me thinking, “What is the right solution for animations?”

The Future

With the increase adoption of Modern Browsers by users, it’s making more and more sense to use css3 transitions for animations.

  • They still work with JS disabled
  • They are arguably easier to code than js-based
  • Semantically, animations should be in CSS
  • The animations don’t have to run through the JavaScript engine in the browser

Flash is NOT Dead. JS-Based Animations Aren’t Dead.

In order to ruffle other peoples’ feathers, people will say things like “Flash is Dead. Use JS-Based animations,” or “JS-Based animations are dead, use css3.” The fact of the matter is none of these technologies will be “dead” anytime soon. Sure, Flash adoption went down when the iPad came out, but it didn’t go away, and it won’t. JS-Based animations won’t be any different.

Flash can still do much more than js and css3, and js can do more than css3. So pick the right tool for the job. I would love to see css3 do just as much as Flash does someday, but that simply isn’t going to happen anytime soon. Maybe not at all. I’m sure the folks over at Adobe will continue to innovate to staying ahead of these other technologies.

Feel free to let me know what you think in the comments. I’m curious to see what others are thinking about this.

By Ryan Tvenge

I'm a web developer and co-owner of Hoverboard that makes cool stuff on the web.

Leave a Reply

Your email address will not be published. Required fields are marked *

Tvenge Design