Choose your (web) animation adventure

Currently, every website or application has an animation to increase their performance, both in terms of user interface or user experience. Animation has come a long way on the modern web and have a long list of choices for how to make an object moving across the screen, like CSS, JavaScript, SVG, the Web Animation API, etc. With so many options, how can we decided which is the best choices to implement for our project ?

Source of image from presentation slide by @valhead

Val Head on 2018 in Hongkong presented about how we can take a look the differences between CSS, JavaScript and SVG to implement animation in our project, as we know each has its pros and cons.

1. CSS

CSS is one of the easiest ways to build animation in our project. We can use key-frames and transition and added with other properties which owned CSS. But, how great CSS can we use for our project ?

CSS transitions and animations are ideal to use in a simple animation and self-contained states for UI elements. CSS is well-defined state transitions. We can implement for loading animations or looping animations, like a navigation menu from the side, showing a tooltip etc. Animation can be implemented in state of element on :hover, :focus, :active, :visited and other.

CSS is one of a great potential for performance because of no need external library without much effort. When we needed a responsive state, CSS can reliable for it because we can adjust properties in media queries.

The easy way with offered by CSS has the following limitations, we must define entirely animation ahead, can’t separate transform properties in IE browser, and the limited access events.

CSS is great and easy way to use, but it might the time to move to JavaScript if :

  • You’ll be chaining more than 3-ish animations in sequence
  • The animation needs to change dynamically at a runtime
  • Need to animate transform properties separately
  • Physics or other complex easing structures are required

2. JavaScript

JavaScript is a great way to use when we want to have advanced effects animations, complex animated interactions, narrative or immersive animation, dynamic state transitions, a lots of options for how to get it, maybe like bouncing, stop, pause, rewind or other complex animation and can animated DOM, SVG and canvas.

When you use JavaScript to animated, perhaps you can use the Web Animations API or a modern framework that you’re comfortable with to easiest the developed our project.

When you’re building a game or drawing to an HTML canvas, you can use requestAnimationFrame directly when you want to orchestrate an entire scene by hand.

3. SVG

Another way to create animations in our product, we can use SVG. SVG is a shorthand from Scalable Vector Graphics used to define vector-based graphics for the Web. SVG defines the graphics in XML format, every element and every attribute in SVG files can be animated. Accordingly, SVG is the best way to use on animated illustrations, icons, infographics, data visual with a complex animation.

SVG has shape morphing and motion along a path, responsive by nature and potential for tiny file sizes.


Performance is one of the critical issues when we developed animations using CSS, JavaScript or SVG. Ensure that you know the impact of animating when we choose ways to use that.

CSS is declarative (the whole animation is known ahead of time). CSS animations with transform and opacity won’t be impacted by the main thread

JS is imperative (browser only really aware of the current frame). Hardware acceleration isn’t automatic.

SVG & Hardware Acceleration not all browsers support it. Good performance in general without it though.

At the end with their pros and cons, we can combine all of the developed animations in our project. We can use JavaScript, CSS, SVG together but we should consider about the performance and easy ways to be implemented.