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.
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="page-content"> <div class="animate guide-pane"> <div style="background-color:#A0CEF2;" data-category="highlights" class="guide-pane__inner animate__item guide-pane__inner--article-header"> </div> </div> <div class="animate guide-pane guide-pane--right"> <div class="guide-pane__inner animate__item guide-pane__inner--content guide-pane__inner--article"> </div> </div> </div> |
#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
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.guide-pane { left: 0; height: 100%; margin-right: -1px; padding-right: 1px; position: absolute; top: 0; width: 50%; } .guide-pane--right { height: 100%; left: auto; right: 0; } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.animate__item { transition: transform 600ms ease 0s; } .animate__item--next, .animate--out-prev>.animate__item:first-child { transform: translateX(100%); } .animate__item--prev, .animate--out-next>.animate__item:first-child { transform: translateX(-100%); } .animate--out-prev>.animate__item--prev, .animate--out-next>.animate__item--next { transform: translateX(0); } |
.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.

Thank you for these deconstructions they are very inspiring and so much fun to discover new ways to think about things!
Thanks Shawn, great to know that it is useful. Stay tuned for more deconstructions in February. Cheers
Keep these coming. I’m keeping an eye on this site!
Thanks Jarod. I am on holidays in January, but will be back in Feb. Cheers
slack has also a very nice UI for tips and guidance…
If you can create sample html and css with working example that may be good