@naikus/stage/dist/stage.css

Check out the live [demo](https://codepen.io/naikus/project/full/AzkkER) (POC uses plain javascript and HTML)

.transformNone {
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  transform: none;
}
/* ------------------------------ Default view and viewport styles ------------------------------ */
.stage-viewport {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.stage-view {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  will-change: transform;
  transform: translateZ(0);
  display: none;
  /* Avoid flickering in webkit browsers, thanks stackoverflow */
  -webkit-backface-visibility: hidden;
}
.stage-view.showing {
  display: block !important;
}
/* ------------------------ Various outofthebox transitions for views  -------------------------- */
.stage-view.pop {
  z-index: 99;
}
.stage-view.in {
  z-index: 98;
  /* 
    * This will allow the view to have fixed elements. If the value is 'transform' the fixed
    * elements will scroll 
    */
  will-change: auto;
}
.stage-view.stack {
  z-index: 97;
}
.slide .stage-view {
  -moz-transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -moz-transition: -moz-transform 490ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -webkit-transition: -webkit-transform 490ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -o-transition: -o-transform 490ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -ms-transition: -ms-transform 490ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  transition: transform 490ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}
.slide .stage-view.pop {
  -moz-transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.slide .stage-view.in {
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  transform: none;
}
.slide .stage-view.stack {
  -moz-transform: translate3d(-50%, 0, 0);
  -webkit-transform: translate3d(-50%, 0, 0);
  -o-transform: translate3d(-50%, 0, 0);
  -ms-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}
.fade .stage-view {
  opacity: 0;
  -moz-transition: opacity 350ms ease;
  -webkit-transition: opacity 350ms ease;
  -o-transition: opacity 350ms ease;
  -ms-transition: opacity 350ms ease;
  transition: opacity 350ms ease;
}
.fade .stage-view.pop {
  opacity: 0;
}
.fade .stage-view.in {
  opacity: 1;
}
.fade .stage-view.stack {
  opacity: 0;
}
.fancy .stage-view {
  -moz-transform: translate3d(100%, 0, 0) scale(1, 1);
  -webkit-transform: translate3d(100%, 0, 0) scale(1, 1);
  -o-transform: translate3d(100%, 0, 0) scale(1, 1);
  -ms-transform: translate3d(100%, 0, 0) scale(1, 1);
  transform: translate3d(100%, 0, 0) scale(1, 1);
  -moz-transition: -moz-transform 500ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -webkit-transition: -webkit-transform 500ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -o-transition: -o-transform 500ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -ms-transition: -ms-transform 500ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  transition: transform 500ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}
.fancy .stage-view.pop {
  -moz-transform: translate3d(100%, 0, 0);
  -webkit-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.fancy .stage-view.in {
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  transform: none;
}
.fancy .stage-view.stack {
  -moz-transform: translate3d(-70%, 0, 0) scale(0.8, 0.8);
  -webkit-transform: translate3d(-70%, 0, 0) scale(0.8, 0.8);
  -o-transform: translate3d(-70%, 0, 0) scale(0.8, 0.8);
  -ms-transform: translate3d(-70%, 0, 0) scale(0.8, 0.8);
  transform: translate3d(-70%, 0, 0) scale(0.8, 0.8);
  -moz-transition: -moz-transform 650ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -webkit-transition: -webkit-transform 650ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -o-transition: -o-transform 650ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -ms-transition: -ms-transform 650ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  transition: transform 650ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}
.lollipop .stage-view {
  opacity: 0;
  -moz-transform: translate3d(0, 80px, 0);
  -webkit-transform: translate3d(0, 80px, 0);
  -o-transform: translate3d(0, 80px, 0);
  -ms-transform: translate3d(0, 80px, 0);
  transform: translate3d(0, 80px, 0);
  -moz-transition: -moz-transform 400ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms ease;
  -webkit-transition: -webkit-transform 400ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms ease;
  -o-transition: -o-transform 400ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms ease;
  -ms-transition: -ms-transform 400ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms ease;
  transition: transform 400ms cubic-bezier(0.19, 1, 0.22, 1), opacity 250ms ease;
}
.lollipop .stage-view.pop {
  -moz-transform: translate3d(0, 80px, 0);
  -webkit-transform: translate3d(0, 80px, 0);
  -o-transform: translate3d(0, 80px, 0);
  -ms-transform: translate3d(0, 80px, 0);
  transform: translate3d(0, 80px, 0);
}
.lollipop .stage-view.in {
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1;
}
.lollipop .stage-view.stack {
  -moz-transform: translate3d(0, -50px, 0);
  -webkit-transform: translate3d(0, -50px, 0);
  -o-transform: translate3d(0, -50px, 0);
  -ms-transform: translate3d(0, -50px, 0);
  transform: translate3d(0, -50px, 0);
  opacity: 0.8;
}
.slide-up .stage-view {
  -moz-transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  -moz-transition: -moz-transform 600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -webkit-transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -o-transition: -o-transform 600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -ms-transition: -ms-transform 600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}
.slide-up .stage-view.pop {
  -moz-transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}
.slide-up .stage-view.in {
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  transform: none;
}
.slide-up .stage-view.stack {
  -moz-transform: translate3d(0, -10px, 0) scale(0.98, 0.98);
  -webkit-transform: translate3d(0, -10px, 0) scale(0.98, 0.98);
  -o-transform: translate3d(0, -10px, 0) scale(0.98, 0.98);
  -ms-transform: translate3d(0, -10px, 0) scale(0.98, 0.98);
  transform: translate3d(0, -10px, 0) scale(0.98, 0.98);
  -moz-transition: -moz-transform 650ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -webkit-transition: -webkit-transform 650ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -o-transition: -o-transform 650ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -ms-transition: -ms-transform 650ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  transition: transform 650ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}
.slide-down .stage-view {
  -moz-transform: translate3d(0, -100%, 0);
  -webkit-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  -moz-transition: -moz-transform 600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -webkit-transition: -webkit-transform 600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -o-transition: -o-transform 600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -ms-transition: -ms-transform 600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  transition: transform 600ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}
.slide-down .stage-view.pop {
  -moz-transform: translate3d(0, -100%, 0);
  -webkit-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
}
.slide-down .stage-view.in {
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  transform: none;
}
.slide-down .stage-view.stack {
  -moz-transform: translate3d(0, 10px, 0) scale(0.98, 0.98);
  -webkit-transform: translate3d(0, 10px, 0) scale(0.98, 0.98);
  -o-transform: translate3d(0, 10px, 0) scale(0.98, 0.98);
  -ms-transform: translate3d(0, 10px, 0) scale(0.98, 0.98);
  transform: translate3d(0, 10px, 0) scale(0.98, 0.98);
  -moz-transition: -moz-transform 650ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -webkit-transition: -webkit-transform 650ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -o-transition: -o-transform 650ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  -ms-transition: -ms-transform 650ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
  transition: transform 650ms cubic-bezier(0.19, 1, 0.22, 1) 0ms;
}
.pop-out .stage-view {
  opacity: 0;
  -moz-transform: translate3d(0, 0, 0) scale(0.9, 0.9);
  -webkit-transform: translate3d(0, 0, 0) scale(0.9, 0.9);
  -o-transform: translate3d(0, 0, 0) scale(0.9, 0.9);
  -ms-transform: translate3d(0, 0, 0) scale(0.9, 0.9);
  transform: translate3d(0, 0, 0) scale(0.9, 0.9);
  -moz-transition: -moz-transform 400ms cubic-bezier(0.19, 1, 0.22, 1) 100ms, opacity 500ms ease;
  -webkit-transition: -webkit-transform 400ms cubic-bezier(0.19, 1, 0.22, 1) 100ms, opacity 500ms ease;
  -o-transition: -o-transform 400ms cubic-bezier(0.19, 1, 0.22, 1) 100ms, opacity 500ms ease;
  -ms-transition: -ms-transform 400ms cubic-bezier(0.19, 1, 0.22, 1) 100ms, opacity 500ms ease;
  transition: transform 400ms cubic-bezier(0.19, 1, 0.22, 1) 100ms, opacity 500ms ease;
}
.pop-out .stage-view.in {
  -moz-transform: none;
  -webkit-transform: none;
  -o-transform: none;
  -ms-transform: none;
  transform: none;
  opacity: 1;
}
.pop-out .stage-view.stack {
  -moz-transform: translate3d(0, 0, 0) scale(1.1, 1.1);
  -webkit-transform: translate3d(0, 0, 0) scale(1.1, 1.1);
  -o-transform: translate3d(0, 0, 0) scale(1.1, 1.1);
  -ms-transform: translate3d(0, 0, 0) scale(1.1, 1.1);
  transform: translate3d(0, 0, 0) scale(1.1, 1.1);
  opacity: 0;
}
.pop-out .stage-view.pop {
  -moz-transform: translate3d(0, 0, 0) scale(0.9, 0.9);
  -webkit-transform: translate3d(0, 0, 0) scale(0.9, 0.9);
  -o-transform: translate3d(0, 0, 0) scale(0.9, 0.9);
  -ms-transform: translate3d(0, 0, 0) scale(0.9, 0.9);
  transform: translate3d(0, 0, 0) scale(0.9, 0.9);
  opacity: 0;
}