Should you use CSS, JS or SMIL for animations?

Three ways are open to you, but which to choose? We explain the pros and cons of each.

CSS, SMIL & JavaScript each have their pros and cons. Weigh them up with your needs to make an informed decision...

01. CSS is good for transformations

Codepen screengrab

Not all SVG properties can be animated via CSS

CSS is great for pretty much any animation that you can achieve with it. But in SVG, it has its limitations because not all SVG properties can be animated via CSS.

So, if you need to animate a property that cannot be animated using CSS, you can choose either SMIL or JS. CSS is generally great for animations including transformations. CSS animations on SVGs also perform better on mobile than SMIL animations.

02. SMIL isn't futureproof

Codepen screengrab

SMIL is capable of animating properties that CSS can't currently animate

SMIL animations have one major advantage over JS animations: they are preserved when the SVG is embedded as an image (using <img> or as a background image in CSS).

SMIL is also capable of animating properties that CSS can't currently animate – such as path data properties, for example. But SMIL doesn't work in any version of IE, and will be deprecated in favour of the Web Animations API in the future.

Defining multiple animations on the same element using SMIL can easily become tedious, especially if they include multiple transformations – which is where CSS comes in handy.

03. JavaScript offers creative freedom

JavaScript makes animating easier if you use an SVG animation library

JavaScript offers you great control over the animations, makes animating easier if you use one of many available SVG animation libraries (my favourite is snap.svg), and gives you finer control over timing functions and easing.

However, JS animations will not be preserved when the SVG is embedded as an image.

Words: Sara Soueidan

Sara Soueidan is a frontend developer, writer and speaker from Lebanon.

Like this? Read these!