Module 11: Using Hardware Acceleration

In this module, you add hardware accelerated page transitions when the user navigates between the list and details views.

Steps

Modify index.html as follows:

Add pageslider.css (or pageslider-fix.css for iOS8 users) inside the head tag in index.html:
```
<link href="assets/css/pageslider.css" rel="stylesheet">
```
Add a script tag to include the pageslider.js library (after jquery.js):
```
<script src="lib/pageslider.js"></script>
```
PageSlider is a micro library hosted by Christophe Coenraets on GitHub here.

Modify app.js as follows:

In the Local Variables section, declare an instance of the PageSlider object as follows:
```
var slider = new PageSlider($('body'));
```
In the routes, replace the calls to $('body').html() with calls to slider.slidePage() passing the same argument to the function.
```
slider.slidePage(new HomeView(service).render().$el);
```
```
slider.slidePage(new SessionView(session).render().$el);
```
Now test your application and you should see the pages slide in left and right when you go between them.

modules