Should I use JavaScript or CSS for animations?

Datetime:2016-08-23 03:00:49          Topic: CSS  JavaScript           Share

Just like a lot of things in life, the answer is usually "it depends" . It depends on your audience and what you're trying to do. Sometimes, one is definitely better than the other. But sometimes it just boils down to your preference.

Got it? Well, I think we're done here!

So, what do we want to keep in mind when choosing between JavaScript and CSS?

BTW:What I mean by JavaScript here is a full-blown JS library for doing animations. JS that's used to add and remove a class doesn't count.

Browser Compatibility

SVG Animation (JS)

If you're thinking of animating SVG elements using CSS, then you're out of luck. Actually, you should be fine if you're sure that your users all use the latest versions of Chrome, Firefox, and Safari, but that's not the kind of world that we live in. As of today, Edge doesn't support CSS Transforms on SVG elements:

You can see for yourself on Edge's platform status .

On IE 11, you wouldn't be able to see this loading animation because it doesn't support CSS properties like stroke-dasharray (I apologize if you are reading this on IE 11!):

So if you're planning on animating some SVG elements, you're better off using JavaScript . Use either GSAP or Snap .

If you're interested on learning why JS works, read SVG Animation and CSS Transforms: A Complicated Love Story which is written by GSAP's author Jack Doyle.

Older Browsers (JS)

If you have users that use IE 9 and below, you wouldn't be able to use CSS Animations and Transitions. While it's true that the number of users on those browsers is constantly declining, this is ultimately your call.

If animation is absolutely necessary for your website, you'll need JavaScript.You can take a look at GSAP --this should work on IE 6 and up.

Animation Complexity

Toggling the look of an element (CSS)

If you have a fairly simple animation that shows up on hover or a click, chances are you'd want to use CSS for that . The advantage of this is that you wouldn't have to download additional libraries, which will keep your page light. Here are some examples of that:

If you'd like to learn more, check out some easy wins that you can do to add animations to your website .

If you're looking for pre-built animations you can use, check out Animate.css .

Loading Animations (either CSS or JS)

Of course, not all websites are created the same. But for the most part, simple loading animations can be done in CSS . Whether it's using a sprite sheet :

Or just animating a few divs:

You can do it with just CSS (or maybe even a GIF!). But if it gets any more complex, it's probably best to use JS. For example if you'd like to make it interactive or if you'd like to manipulate SVGs you should use GSAP's MorphSVG Plugin or something similar.

Staggering (CSS or JS)

In the CSS-Tricks article on Staggering Animations , it's explained as:

When each item's animation is incrementally delayed, they appear as individuals, but still move collectively as a whole.

You can see it for yourself here:

You'd either have to use CSS with setTimeout or requestAnimationFrame or you can use a JS library like Popmotion to do it for you. Read more about staggering animations on CSS-Tricks !

Psst!

Use this article only as a guide--you'll be the one to judge on what's best for your website. On the web, there are a lot of ways to do the same things, and there are always pros and cons to a certain approach. Learn from this article and see where it takes you!

For more information about CSS vs. JavaScript check these out:

Libraries that you can use:

Did I miss something? Email me!





About List