O'Reilly logo

Learning AngularJS Animations by Richard Keller

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Measuring browser layers and Jank on Chrome

We just saw that using Chrome DevTools helps us find performance bottlenecks. Now, we are going to see how to find paint layers and enhance an animation just by replacing some CSS properties.

For this sample, we will create a sliding menu such that when we click on a button and it slides from the left menu items, the page content slides to the right too. When we click on the button again, both the menu and page content slides to the left until the menu vanishes from the viewport.

The following HTML will be used:

<!DOCTYPE html> <html ng-app="myApp"> <head> <title>Performance</title> <link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet" /> <link href="performance.css" ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required