Animations

What these view transitions look and behave like will depend very much on the type of views you’re dealing with, so for example animating a modal overlay on top of a view should be a different experience to transitioning between a list and details view.

Use translations to move between views

To make life a bit easier let’s assume there are two views: a list view and a details view. As the user taps on a list item inside the list view the details view will slide in, and the list view will slide out.

To achieve this effect you will need a container for both views which has overflow: hidden set on it. That way the two views can both be inside it side-by-side without showing any horizontal scrollbars, and each view can slide side-to-side inside the container as needed.

The CSS for the container is:

.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

The position of the container is set as relative . This will mean that each view inside it can be positioned absolutely to the top left corner and then moved around with transforms. This approach is better for performance than using the left property (since that triggers layout and paint), and is typically easier to rationalize.

.view {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;

  /* let the browser know we plan to animate
     each view in and out */
  will-change: transform;
}

Adding a transition on the transform property provides a nice slide effect. To give it a nice feel it’s using a custom cubic-bezier curve, which we discussed in the Custom Easing guide .

.view {
  /* Prefixes are needed for Safari and other WebKit-based browsers */
  transition: -webkit-transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
  transition: transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

The view that is offscreen should be translated to the right, so in this case the details view needs to be moved:

.details-view {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

Now a small amount of JavaScript is necessary to handle the classes. This will toggle the appropriate classes on the views.

var container = document.querySelector('.container');
var backButton = document.querySelector('.back-button');
var listItems = document.querySelectorAll('.list-item');

/**
 * Toggles the class on the container so that
 * we choose the correct view.
 */
function onViewChange(evt) {
  container.classList.toggle('view-change');
}

// When you click on a list item bring on the details view.
for (var i = 0; i < listItems.length; i++) {
  listItems[i].addEventListener('click', onViewChange, false);
}

// And switch it back again when you click on the back button
backButton.addEventListener('click', onViewChange);

See sample.

You could expand this to cover multiple views, and the basic concept should remain the same; each non-visible view should be offscreen and brought on as needed, and the currently onscreen view should be moved off.

In addition to transitioning between views this technique can also be applied to other slide-in elements, like sidebar navigation elements. The only real difference is that you shouldn’t need to move the other views.

Ensure your animation works with larger screens

For a larger screen you should keep the list view around all the time rather than removing it, and slide on the details view from the right hand side. It’s pretty much the same as dealing with a navigation view.