Dropbox Guide Deconstructed

Dropbox Guide Deconstructed

How to create animated page transitions as seen on the Dropbox Guide?

Have a look under the hood of this creative page transitions from Dropbox.

CSS3 Transforms

Dropbox Guide

The page is divided into two halves and when you click on the next or previous navigation link, the new content slides in from a side.

The interesting part is that each side of the screen animates on its own.


The new content is preloaded and CSS3 transforms are then animating two containers to the right position.

Explore this creative effect in more detail in the full deconstruction.


Pretty cool, right? Have you experimented with non traditional page transitions and layouts on your own projects?

Let me know in the comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.