Web animation is totally on fleek this year. I love that its popularity is gaining such momentum because it is my favourite part of building for the web. You might have decided you wanted to get on the animation bandwagon and ended up a little overwhelmed, just because there are so many ways you can animate something on the web.

A common question beginners ask is, should I get started animating HTML elements with CSS or JavaScript? For some reason people love to answer that question with “use X library”. A Googling around this subject reveals a series of articles discussing whether JS is “better” than CSS or vice versa. My answer is: when you’re just getting started, you should use what you are most comfortable with!

Knowledge is power - the best way to get comfortable with something is to understand it better! So in this post I’m not going to try to tell you whether a CSS Transition or a JavaScript Tween is better than the other, I’m just going to explain how they work and how they differ so you can make a more informed decision about what to use.

How any web animation works

Web animations are created by updating a screen element’s properties so rapidly that the human eye can’t distinguish the separate property states and it instead looks like fluid movement. In a CSS transition the browser calculates these updates for you. When animating with JavaScript Tweens, you can control these updates yourself.

CSS Transitions

Say you want to change an element’s CSS property from A to B, by setting a CSS transition you can specify the animation timing for a transition between those two property states. You can declare this transition in a stylesheet. Here is an example of a CSS transition being used on an element, to animate between two scaled sizes.

Once a CSS transition is set on the element, it will use the transition timing whenever the relevant property is updated. In the example above the property is changed using a CSS hover, but it could also be changed via another user input or JavaScript manipulation.

On easing:

An easing function specifies the rate of change of a parameter over time. You can specify the easing in a transition by declaring it in the animation-timing property.

The example above uses a cubic-bezier function to create an easeOutQuart ease. You can check out some common easing functions and their cubic-bezier functions at easings.net

A CSS Transition could be considered a little bit of a set and forget animation. Once the transition is triggered the browser begins rendering the animation and you don’t have a whole lot of control over how it does that. You can basically only stop the transition, there is no pausing or reversing.

JavaScript Tweens

It all starts with a loop that executes on every frame. Not too long ago people would use a setInterval function to create a loop for animation, but these days its recommended to use the requestAnimationFrame function, as it gives better performance. You create your animation frames by calling requestAnimationFrame within a requestAnimationFrame function, creating a recurring loop.

  function loop() {
    // a frame
    requestAnimationFrame(loop);
}

Now we can update the property of an element on each frame. A ’Tween’ is short for in-betweening. A JavaScript Tween function will calculate the property values for the frames in between the start point for a property and the end point for the property. You can write your own Tween function, here is an example of the box from our earlier CSS example, except it uses a JavaScript Tween.

If you have a look at the code in the example above, you will see that unlike in the case of the CSS Transition where the browser makes the calculations for you, a JavaScript Tween is created by writing a JavaScript function to calculate the position based on the current time.

Writing JavaScript Tweens yourself can be a little tedious, so it’s great there are so many JavaScript animation libraries that will handle this part for you.

Here’s a tween using Velocity.js

Here’s the same tween using GreenSock TweenLite

You might have noticed that we are in fact updating CSS transform properties with JavaScript Tweens. This is where things can get a little bit confusing. Some people will call these animations "CSS Animations with JavaScript" or something along those lines. Its important to note that "CSS Animations" and JavaScript Tweens are different beasts, particularly due to the differences I’ve just outlined.

CSS Transitions don’t have to be declared in a stylesheet either, you can apply these transitions to elements directly with JavaScript. Transit.js is a library that allows you to do this.

The above example is using a CSS Transition, even though there is nothing in the stylesheet. Out of control!

So, which should I use?

Well, now you understand how both of these animation methods work, you might be closer to deciding this for yourself! Performance implications aside, I think the main deciding factor is probably the level of control you need or want. Because JavaScript Tweens allow for control of the updates on every frame, you have a fine-grained control over the animations. However, plenty can still be achieved with CSS Transitions (especially if you throw some controlling with JavaScript in to the mix). If you want to work on your animation chops, the actual method you use is less important. Whether you use CSS or JavaScript or a combination of the two, getting lots of practice in trying different effects is what will really improve your animation skills.

Until next time, happy animating!


If you have a question or a topic you would like me to write about next, please leave a comment for me a below, send me a tweet at @rachsmithtweets or flick me an email at contact at rachsmith dot com.


17,204 5 85