If you are building a modern website or a mobile app you certainly need to animate some elements of your UI. Actually, I want to be even more drastic, you must do it.
Why?
Do you wonder why? The reason is very simple: you want to have some animations because they are an extraordinary powerful tool that allows you go give a sense of speed and modernity to your UI, because animations allows you to focus your's users attention to a specific part of your app, and, of course, makes your UI more visual attractive.
Ok, so now that we agree that you need some animations let's see how you can implement them.
How?
I'll bet that, if you are new to animations, you first thought is to use jQuery (or if you feel brave vanilla js). I mean, it makes totally sense, jQuery has a method called animation, that is very simple and easy to use, so I understand you. But, I'm sorry, that's the wrong answer!
Anyway, before giving you the right answer I want to dig a little bit into the jQuery animation method, to see how it works and why it's wrong.
Anatomy of .animate()
First of all let's take a look at the method's interface
animate( properties [, duration ] [, easing ] [, complete ] )
As you can see there are a lot of options that allows you to customize your animations. As first argument the method takes an object with as key the property that you want to animate and as value, well, the new value of the css property. All the other arguments are optional and allows you to set the duration of the animation (in milliseconds) the type of easing and a callback function that will be executed at the end of the animation. As I already said: very easy and simple.
But what is this method exactly doing? We can easily understand it inspecting an DOM element animated using jQuery.
As you can see jQuery is simply changing the value of the element’s properties, that is very slow because every single change cause a browser repaint event (and other very bad and slow things), that is one of the most (probably the most) intense operations that the browser can perform
CSS animations to the rescue!
Here we are to the right answer: CSS animations!
To use CSS animations we have two options: we can use the transform property or create keyframe. This two options behave exactly in the same way, the only difference is in the code and in the different level of customization. But stop talking an let’s see some code!
CSS transform
The transform property is very powerful and easy to use and let you apply some cool transformations to your elements. Some examples are scale, translate and rotate.
Do you wonder how to use it? Easy peasy! If you want to move an element of 50 pixels to the right what you have to do is simply add the following properties to your element
transform: translate3d(50px, 0, 0);
As you can understand translate3d is one of the many transform’s functions and this is it’s interface: translate3d(X, Y, Z)
CSS Keyframe
With keyframes we have more control, in fact we can tune virtually every single step of out animation. Look at the code below.
@keyframes my-cool-animation {
0% {
bottom: 0;
left: 0;
}
33% {
bottom: 20px;
left: 20px;
}
66% {
bottom: 300px;
left: 300px;
}
100% {
bottom: 320px;
left: 320px;
}
}
Yes, with keyframes we can specify a value for every step! In this way not only we are creating a custom animation but also a custom easing!
Now that we have our keyframe rule, we have to assign this rule to an element:
#div.my-animated-element {
animation: my-cool-animation;
}
And that’s all!
Setting the animations parameters
I’m sorry, I was kinda lying, that’s not all yet, we still have to add some more lines of code to create our animations. In fact, if you try to add the above snippets to your stylesheets, you will see that the elements will have a new position, that’s true, but no fancy animations 😔
The good news is that i’m going to tell you how to fix it!
- If you are using the transform property you’ll need this:
transition:all 2s ease-in-out;
With this single line of code you can set with property you want to animate, the timing and the easing (as usual for css you can also set this values independently using the extended version)
- If you are using keyframes instead you will want to add this code
animation: my-cool-animation 5s infinite;
Here we are setting the animation name (as we previously did), the timing and the number of times the animations should repeat
The CSS animations secret
If your you are still reading, at this point you will be wondering why CSS animations are better. And that’s a great question, and i’m going to tell you why in just a second.
The simply truth is that CSS animations are faster because they are natively implemented in the browser that is handling them in a highly optimized way! I’m sorry if you were waiting for a great revelation, sometimes the truth is so easy!
One more thing...
Yep, there is a little trick that I want to share with you. For super heavy animations we can force the browser to render them using the GPU acceleration! Doing that we can use the extra power of our GPUs to do some heavy computation, giving some rest to the CPU, and this will result in smoother and more lovely animations.
The GPU acceleration is enabled by default for only some properties, one of them is translate3d, so the trick is to simply add translate3d(0, 0, 0) to the elements that we want to render using the GPU and now all the hard work will be handled by he GPU: thank you buddy!
I know you! i know that you are already thinking of adding translate3d to all your DOM elements to make your website fast as a rocket! But please, don’t do that! GPU acceleration can be ultra memory intense and can also require a lot of energy, that can be bad, especially on mobile devices. So use it responsibly.
Conclusion
I hope that the next time you will choose the right tool for your animations. I’m not saying that jQuery animate() is evil, what I’m saying is that it can be evil sometimes, especially if you have a lot of animations and, of course, especially if your website is mobile oriented (and it should!).
This is a GIF of me kicking away jQuery animate() and choosing CSS animations