Listen, I know that cool animation on your website looks great. I know! I think it looks pretty alright too. After all we both probably use Firefox on some fast computers, right? Lots of popular sites use animation! Well, I’m here to try and convince you that you are so very very wrong. One of the greatest sins to commit in Javascript is to add in an animation library.

Please stop imposing your will on the people unfortunate enough to suffer slow computers. You’re running a website, not Crysis, it should run on a 5-year-old computer. When I head home for the holidays animation suddenly becomes a curse. I watch, in horror, as your finely tuned and tweened animation moves jerkily across the screen of my mom’s computer. Since it runs too often because it is not expecting my computer to be slow, your animation freezes up my browser, and due to the single-threaded nature of this Pentium 4 computer, the entire OS as well. I sit there, locked into viewing your horrorshow animation, unable to do anything but cry.

The road to hell is paved with good intentions. Here’s a play-by-play.

  • You may decide to set up each animation frame is a setInterval call. After all, setInterval should call this function every 30 ms if I tell it to, right?
  • Discovering that the time between setInterval calls has no correlation to reality since browsers both clamp the speed and ignore it due to the nature of Javascript. So instead, one may base the animation on actual time, rather than frames, probably using Date.
  • Later, you may notice it looks terrible on older computers. Turns out that alpha-blending the entire screen was too much for them. You realize that the same effect works better on a smaller area since browsers tend to only update the area that has changed.
  • Nonetheless, you may notice it runs too slow on older computers. Realizing that setInterval is basically running constantly, you have it run less constantly. Now your animation is choppy on fast computers.
  • You start building a speed-detecting system before you realize it probably won’t work right and you are going insane and adding all this code to what amounts to a minor visual effect is silly.

I know animation is awesome, but Javascript is just not a platform that wants to deal with it. HTML may be a standard but browser performance isn’t. Remember that the goal of a browser is to protect users from the mistakes of foolish/malicious developers, something that your animation is doing to my old computer. To this end all browsers clamp the speeds of setTimeout/setInterval, but it doesn’t work for everybody. Smart developers should know that and avoid animation in Javascript almost entirely.

That being said, the title of this post is a lie. I think animation should be experimented with, but the only decent animation I’ve seen on websites is the subtle kind. Javascript/HTML, of all the platforms with the potential for animation, is one of the least capable of doing it right. Just keep that in mind and I won’t complain anymore, okay Internet?

Leave a Reply