Should you use CSS, JS or SMIL for animations?

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
(opens in new tab)

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
(opens in new tab)

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 makes animating easier if you use an SVG animation library
(opens in new tab)

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 (opens in new tab)

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

Like this? Read these!

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.