Dropbox Guide

dropbox.com/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.

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

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.

GreenSock Workshop - Premium GreenSock Tutorials - Sign Up Now!

6 Comments

  1. Shawn
    Reply

    Thank you for these deconstructions they are very inspiring and so much fun to discover new ways to think about things!

    • Petr Tichy
      Reply

      Thanks Shawn, great to know that it is useful. Stay tuned for more deconstructions in February. Cheers

  2. jarod
    Reply

    Keep these coming. I’m keeping an eye on this site!

    • Petr Tichy
      Reply

      Thanks Jarod. I am on holidays in January, but will be back in Feb. Cheers

  3. Fred
    Reply

    slack has also a very nice UI for tips and guidance…

  4. MiqDad
    Reply

    If you can create sample html and css with working example that may be good

Leave a Reply to Petr Tichy

Click here to cancel reply.

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">