CODEWITHSUNDEEP
javascripthtmlcss
Rjdlee
Rjdlee

Reputation: 779

Choosing between all the methods to animate

There's all sorts of ways of animating elements these days. HTML5 canvas animations, CSS3 animations and transitions, regular CSS animations, even creating new HTML objects (http://uperduper.com/tronGame/index.html). How do you choose between all these? Is there any that's faster?

Upvotes: 1

Views: 60

Answers (1)

Stephen Thomas
Stephen Thomas

Reputation: 14063

It will come as no surprise, I'm sure, that the simple answer is "it depends." There are several factors that can influence the choice of an animation technique:

  1. As you mention, performance is definitely a factor. Modern browsers, especially on mobile devices, can rely on hardware-based graphics acceleration for the best performance. The most reliable way to force the use of hardware acceleration is careful use of CSS transforms. If your objective is maximum performance, then CSS3 is probably the best approach.

  2. But not all browsers support CSS3. If your users are accessing your site using Internet Explorer 8, for example, then the CSS3 transforms and transitions won't apply. You can choose to (a) forgo animations for those users (if the animations aren't essential for your site), or (b) use a different technique that is more universally supported. For the later, JavaScript-based animation (particularly that in jQuery) may be the best approach.

  3. Of course, these answers assume that your objectives can be met with CSS3 transitions and/or CSS (and related) properties accessible via JavaScript. That may not be true if you have a complex animation in mind. (Well, it's probably possible to reproduce any animation in CSS and/or JavaScript, but the complexity can be mind-boggling.) For more complex animations, you might want to look at canvas animations (especially if your source artwork is raster-based) or even SVG animations (if your source is vector-based).

And these options don't take into account factors other than the source or audience. Other questions to ask include the skill and experience of the developer. Someone that's very familiar with JavaScript development will likely be more successful with the JavaScript/jQuery approach, while a more traditional (e.g. Flash) designer might be more comfortable with canvas or SVG.

Upvotes: 2

Related Questions