Tip 51: Leverage CSS for Animations

The last tip isn’t even a JavaScript tip. Instead, it’s a tip about when to stop using JavaScript.

Using css for animations

The key to writing readable code is to use the best tool for the job. JavaScript used to be the best tool for animations. In fact, there were entire libraries dedicated to using JavaScript to create drop-down menus or to animate slidein elements.

It’s much easier now. CSS is replacing JavaScript for simple animations. That’s great. Now you don’t have to worry about using the right timeouts or calculating odd-size constraints. CSS will take care of all that for you. You’ll still need JavaScript for more complicated animations, but for most common tasks, CSS works great.

Example

Start by creating a simple page that has a menu on the right. The markup is very simple. You need some text, a button to toggle the side menu, and the menu itself.