Transitions for off-canvas navigation

Today wed like to share another set of transition effects with you. This time well explore transitions for sidebars or off-canvas content like the one weve used in theMulti-Level Push Menu.

The idea is to show some hidden sidebar with a subtle transition on the element itself and also on the remaining content. Usually the sidebar slides in, pushing the other content to the side. But there are many more possibilities for subtle and fancy effects and today we want to give you some inspiration.

The structure of our demo is very specific because we want to be able to show all effects in one page only. But in general, we need a sidebar element that will be either inside or outside of a push wrapper, depending on whether we want the sidebar to be on top of the push wrapper or under it.
So, either well have

An example effect is the following. We add a perspective value to the main container and then we rotate the push wrapper and the menu in 3D:

.st-effect-7.st-container {
    perspective: 1500px;
    perspective-origin: 0% 50%;
}
 
.st-effect-7 .st-pusher {
    transform-style: preserve-3d;
}
 
.st-effect-7.st-menu-open .st-pusher {
    transform: translate3d(300px, 0, 0);
}
 
.st-effect-7.st-menu {
    transform: translate3d(-100%, 0, 0) rotateY(-90deg);
    transform-origin: 100% 50%;
    transform-style: preserve-3d;
}
 
.st-effect-7.st-menu-open .st-effect-7.st-menu {
    visibility: visible;
    transform: translate3d(-100%, 0, 0) rotateY(0deg);
}

Note that were only using visibility here because we have more than one sidebar in our demo. If you just have one sidebar, you wont have to set the visibility value from hidden to visible.

Some browsers dont support transitions on pseudo-elements (our overlays), so you might see a quick flicker in those browsers (e.g. some mobile browsers).

IE10 does not supporttransform-style: preserve-3dwhich will break nested 3D transformed elements. We use this in a couple of examples, so you wont be able to see the effect correctly for those ones.

For the demos we are using the beautifulLiniconsiconfont bySergey Shmidtcreated with the help of theIcoMoon app.

We hope this collection gives you some inspiration for creating some nice effects.