Dropbox Guide

Dropbox is a life saver. A great app with the slickest User Guide out there.

Quick Overview

When the user goes to the next section of the guide, the new content animates into view.

The interesting part is that each half of the viewport animates separately.

CSS3 transform magic? Let’s find out.

HTML Structure

First let’s explore the visual image of how it was laid out with CSS.

And here is the HTML markup.

#page-content is a full-screen container with overflow: hidden.

The left and right part of the browser is created by div.guide-pane with the right part also having additional class .guide-pane—right.

Both parts are 50% wide and absolute positioned. .guide-pane—right has the left offset reset to auto and is positioned to right: 0.

CSS3 Animations

The transition of the sections is done by adding extra classes to a few containers.

CSS3 transitions, then animates the translateX between 100%, -100% and 0.

Have a look at the extraction from the stylesheet.

.animate__item contains the CSS transition, timing and easing.

.animate—out-prev and .animate—out-next are two classes added to both panes when the user navigates to a different section.

A new container is then loaded and injected into the .guide-pane.

The newly loaded content has either class .animate__item--next or .animate__item--prev based on which direction we are navigating to.

After the animation is completed the container with the old content is removed from the DOM.

Enough geeky talk, have a look at the visual indication of what’s happening.

Previous/Next Animation

You can see how both .animate__item divs are animating away from their original position.

Old content to translateX(-100%) and new content to translateX(0).

Animating the previous section works exactly the same way, with opposite values and classes containing prev instead of next.

Here is the visual explanation.

Conclusion

Most sites with similar animations use a mixture of additional classes and CSS3 transitions.

The disadvantage is that these animations won’t work without JavaScript being turned on, but let’s be honest who turns off JavaScript these days?

Have you used a similar approach on your own projects?

Let me know in the comments below.

Until next time, happy deconstructing.