ellipsis-compass 1.0.1

data/stylesheets/animation/_transit.scss

@@ -0,0 +1,425 @@
+
+
+//transitions
+
+@mixin transit-dissolveIn() {
+  $name: DissolveIn;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+    }
+    5% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}
+
+@mixin transit-dissolveOut() {
+  $name: DissolveOut;
+  @include keyframes($name) {
+    5% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}
+
+@mixin transit-slideLeftIn() {
+  $name: SlideLeftIn;
+  @include keyframes($name) {
+    0% {
+      @include transform(translate3d(100%,0,0));
+      opacity:1;
+    }
+    100% {
+      @include transform(translate3d(0,0,0));
+      opacity:1;
+    }
+  }
+}
+
+@mixin transit-slideLeftOut() {
+  $name: SlideLeftOut;
+  @include keyframes($name) {
+    0% {
+      @include transform(translate3d(0,0,0));
+      opacity:1;
+    }
+    100% {
+      @include transform(translate3d(-100%,0,0));
+      opacity:1;
+    }
+  }
+}
+
+@mixin transit-slideRightIn() {
+  $name: SlideRightIn;
+  @include keyframes($name) {
+    0% {
+      @include transform(translate3d(-100%,0,0));
+      opacity:1;
+    }
+    100% {
+      @include transform(translate3d(0,0,0));
+      opacity:1;
+    }
+  }
+}
+
+@mixin transit-slideRightOut() {
+  $name: SlideRightOut;
+  @include keyframes($name) {
+    0% {
+      @include transform(translate3d(0,0,0));
+      opacity:1;
+    }
+    100% {
+      @include transform(translate3d(100%,0,0));
+      opacity:1;
+    }
+  }
+}
+
+@mixin transit-fadeSlideLeftIn() {
+  $name: FadeSlideLeftIn;
+  @include keyframes($name) {
+    0% {
+      @include transform(translate3d(100%,0,0));
+      opacity:0;
+    }
+    100% {
+      @include transform(translate3d(0,0,0));
+      opacity:1;
+    }
+  }
+}
+
+@mixin transit-fadeSlideLeftOut() {
+  $name: FadeSlideLeftIn;
+  @include keyframes($name) {
+    0% {
+      @include transform(translate3d(0,0,0));
+      opacity:1;
+    }
+    100% {
+      @include transform(translate3d(-100%,0,0));
+      opacity:0;
+    }
+  }
+}
+
+@mixin transit-fadeSlideRightIn() {
+  $name: FadeSlideRightIn;
+  @include keyframes($name) {
+    0% {
+      @include transform(translate3d(-100%,0,0));
+      opacity:0;
+    }
+    100% {
+      @include transform(translate3d(0,0,0));
+      opacity:1;
+    }
+  }
+}
+
+@mixin transit-fadeSlideRightOut() {
+  $name: FadeSlideRightIn;
+  @include keyframes($name) {
+    0% {
+      @include transform(translate3d(0,0,0));
+      opacity:1;
+    }
+    100% {
+      @include transform(translate3d(100%,0,0));
+      opacity:0;
+    }
+  }
+}
+
+@mixin transit-popIn() {
+  $name: PopIn;
+  @include keyframes($name) {
+    0% {
+      opacity: 0;
+    }
+    5% {
+      @include transform(scale(.2));
+      opacity: 0;
+    }
+    100% {
+      @include transform(scale(1));
+      opacity: 1;
+    }
+  }
+}
+
+@mixin transit-popOut() {
+  $name: PopOut;
+  @include keyframes($name) {
+    5% {
+      @include transform(scale(1));
+      opacity: 1;
+    }
+    100% {
+      @include transform(scale(.2));
+      opacity: 0;
+    }
+  }
+}
+
+@mixin transit-flipLeftIn() {
+  $name: FlipLeftIn;
+  @include keyframes($name) {
+    0% {
+      @include transform(rotateY(-180deg) scale(1));
+      opacity:0;
+    }
+    50% {
+      @include transform(rotateY(-90deg) scale(1));
+      opacity:0;
+    }
+    51% {
+      @include transform(rotateY(-89deg) scale(1));
+      opacity:1;
+    }
+    100% {
+      @include transform(rotateY(0deg) scale(1));
+      opacity:1;
+    }
+  }
+}
+
+@mixin transit-flipLeftOut() {
+  $name: FlipLeftOut;
+  @include keyframes($name) {
+    0% {
+      @include transform(rotateY(0deg) scale(1));
+      opacity:1;
+    }
+    50% {
+      @include transform(rotateY(90deg) scale(1));
+      opacity:1;
+    }
+    51% {
+      @include transform(rotateY(91deg) scale(1));
+      opacity:0;
+    }
+    100% {
+      @include transform(rotateY(180deg) scale(1));
+      opacity:0;
+    }
+  }
+}
+
+
+@mixin transit-flipRightIn() {
+  $name: FlipRightIn;
+  @include keyframes($name) {
+    0% {
+      @include transform(rotateY(180deg) scale(1));
+      opacity:0;
+    }
+    50% {
+      @include transform(rotateY(90deg) scale(1));
+      opacity:0;
+    }
+    51% {
+      @include transform(rotateY(89deg) scale(1));
+      opacity:1;
+    }
+    100% {
+      @include transform(rotateY(0deg) scale(1));
+      opacity:1;
+    }
+  }
+}
+
+@mixin transit-flipRightOut() {
+  $name: FlipRightOut;
+  @include keyframes($name) {
+    0% {
+      @include transform(rotateY(0deg) scale(1));
+      opacity:1;
+    }
+    50% {
+      @include transform(rotateY(90deg) scale(1));
+      opacity:1;
+    }
+    51% {
+      @include transform(rotateY(91deg) scale(1));
+      opacity:0;
+    }
+    100% {
+      @include transform(rotateY(180deg) scale(1));
+      opacity:0;
+    }
+  }
+}
+
+
+//smartphone
+@mixin transit-cubeLeftIn() {
+  $name: CubeLeftIn;
+  @include keyframes($name) {
+    0% {
+      @include transform(rotateY(90deg) translateZ(320px));
+      opacity:1;
+    }
+
+    95% {
+      @include transform(rotateY(0deg) translateZ(0) translateX(0));
+      opacity:0;
+    }
+  }
+}
+
+@mixin transit-cubeLeftOut() {
+  $name: CubeLeftOut;
+  @include keyframes($name) {
+    0% {
+      @include transform(rotateY(0deg) translateZ(0) translateX(0));
+      opacity:1;
+    }
+
+    95% {
+      @include transform(rotateY(-90deg) translateZ(320px));
+      opacity:0;
+    }
+    100%{
+      display:none;
+    }
+  }
+}
+
+@mixin transit-cubeRightIn() {
+  $name: CubeRightIn;
+  @include keyframes($name) {
+    0% {
+      @include transform(rotateY(-90deg) translateZ(320px));
+      opacity:0;
+    }
+
+    95% {
+      @include transform(rotateY(0deg) translateZ(0) translateX(0));
+      opacity:1;
+    }
+  }
+}
+
+@mixin transit-cubeRightOut() {
+  $name: CubeRightOut;
+  @include keyframes($name) {
+    0% {
+      @include transform(rotateY(0deg) translateZ(0) translateX(0));
+      opacity:0;
+    }
+
+    95% {
+      @include transform(rotateY(90deg) translateZ(320px));
+      opacity:1;
+    }
+    100%{
+      display:none;
+    }
+  }
+}
+
+@mixin transit-swapLeftIn() {
+  $name: SwapLeftIn;
+  @include keyframes($name) {
+    0% {
+      opacity:0;
+    }
+    5% {
+      @include transform(translate3d(0px, 0px, -800px) rotateY(-70deg));
+      opacity: 0;
+    }
+    35% {
+      @include transform(translate3d(180px, 0px, -400px) rotateY(-20deg));
+      opacity: 1;
+    }
+    95% {
+      @include transform(translate3d(0px, 0px, 0px) rotateY(0deg));
+      opacity: 1;
+    }
+
+  }
+}
+
+@mixin transit-swapLeftOut() {
+  $name: SwapLeftOut;
+  @include keyframes($name) {
+    5% {
+      @include transform(translate3d(0px, 0px, 0px) rotateY(0deg));
+      opacity:1;
+    }
+
+    35% {
+      @include transform(translate3d(-180px, 0px, -400px) rotateY(20deg));
+      opacity: .5;
+    }
+    95% {
+      @include transform(translate3d(0px, 0px, -800px) rotateY(70deg));
+      opacity: 1;
+    }
+
+  }
+}
+
+@mixin transit-swapRightIn() {
+  $name: SwapRightIn;
+  @include keyframes($name) {
+    0% {
+      opacity:0;
+    }
+    5% {
+      @include transform(translate3d(0px, 0px, -800px) rotateY(70deg));
+      opacity: 0;
+    }
+    35% {
+      @include transform(translate3d(-180px, 0px, -400px) rotateY(20deg));
+      opacity: 1;
+    }
+    95% {
+      @include transform(translate3d(0px, 0px, 0px) rotateY(0deg));
+      opacity: 1;
+    }
+
+  }
+}
+
+@mixin transit-swapRightOut() {
+  $name: SwapRightOut;
+  @include keyframes($name) {
+    5% {
+      @include transform(translate3d(0px, 0px, 0px) rotateY(0deg));
+      opacity:1;
+    }
+
+    35% {
+      @include transform(translate3d(180px, 0px, -400px) rotateY(-20deg));
+      opacity: .5;
+    }
+    95% {
+      @include transform(translate3d(0px, 0px, -800px) rotateY(-70deg));
+      opacity: 1;
+    }
+
+  }
+}
+
+
+
+
+
+
+
+
+
+
+

data/stylesheets/animation/_transitions.scss

@@ -0,0 +1,320 @@
+@import "transit";
+
+/*[data-role=container]{
+  position:absolute;
+  top:0;
+  left:0;
+  width:100%;
+  min-height: 100%;
+}
+.ui-page {
+  top: 0;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  min-height: 100%;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  outline: none;
+}
+.ui-placeholder {
+  top: 0;
+  left: 0;
+  position: absolute;
+  outline: none;
+
+
+}
+.ui-viewport{
+  position:relative;
+  visibility: hidden;
+  //overflow: hidden;
+}
+.ui-hidden{
+  visibility: hidden;
+}
+@media screen and (orientation: portrait){
+  .ui-page { min-height: 420px; }
+  body{
+    -webkit-user-select: none;
+  }
+
+}
+@media screen and (orientation: landscape){
+  .ui-page { min-height: 300px; }
+  body{
+    -webkit-user-select: none;
+  }
+}
+
+.ui-viewport-transitioning,
+.ui-viewport-transitioning .ui-page {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.in {
+  -webkit-animation-timing-function: ease-in-out;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-timing-function: ease-in-out;
+  -moz-animation-duration: 250ms;
+  -o-animation-timing-function: ease-in-out;
+  -o-animation-duration: 250ms;
+  animation-timing-function: ease-in-out;
+  animation-duration: 250ms;
+}
+.out {
+  -webkit-animation-timing-function: ease-in-out;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-timing-function: ease-in-out;
+  -moz-animation-duration: 250ms;
+  -o-animation-timing-function: ease-in-out;
+  -o-animation-duration: 250ms;
+  animation-timing-function: ease-in-out;
+  animation-duration: 250ms;
+}
+
+.hardware-accelerate{
+  -webkit-transform: translate3d(0, 0, 0);
+}
+.supports3d{
+  -webkit-perspective: 1000;
+  -moz-perspective: 1000;
+  -o-perspective: 1000;
+  perspective: 1000;
+  > * {
+    -webkit-transform: translate3d(0,0,0) rotate(0) scale(1);
+
+  }
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+
+}
+
+
+
+//Page Transitions
+
+//fade  --mobile and desktop
+.fade.out, .fade.in {
+  -webkit-animation-timing-function: ease-in-out;
+  -webkit-animation-duration: 350ms;
+  -moz-animation-timing-function: ease-in-out;
+  -moz-animation-duration: 350ms;
+  -o-animation-timing-function: ease-in-out;
+  -o-animation-duration: 350ms;
+  animation-timing-function: ease-in-out;
+  animation-duration: 350ms;
+
+}
+.fade.in {
+  @include animation(fadeIn);
+}
+.fade.out {
+  @include animation(fadeOut);
+}
+.fade.in.reverse {
+  @include animation(fadeIn);
+}
+.fade.out.reverse {
+  @include animation(fadeOut);
+}
+
+
+//dissolve  --mobile and desktop
+.dissolve.out, .dissolve.in {
+  -webkit-animation-timing-function: ease-in-out;
+  -webkit-animation-duration: 350ms;
+  -moz-animation-timing-function: ease-in-out;
+  -moz-animation-duration: 350ms;
+  -o-animation-timing-function: ease-in-out;
+  -o-animation-duration: 350ms;
+  animation-timing-function: ease-in-out;
+  animation-duration: 350ms;
+
+}
+.dissolve.in {
+  @include animation(dissolveIn);
+}
+.dissolve.out {
+  @include animation(dissolveOut);
+}
+.dissolve.in.reverse {
+  @include animation(dissolveIn);
+}
+.dissolve.out.reverse {
+  @include animation(dissolveOut);
+}
+
+
+
+//slide
+.slide.out, .slide.in {
+  -webkit-animation-timing-function: ease-in-out;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-timing-function: ease-in-out;
+  -moz-animation-duration: 250ms;
+  -o-animation-timing-function: ease-in-out;
+  -o-animation-duration: 250ms;
+  animation-timing-function: ease-in-out;
+  animation-duration: 250ms;
+}
+.slide.out {
+  @include animation(slideleftout);
+}
+
+.slide.in {
+  @include animation(slideleftin);
+}
+
+.slide.out.reverse {
+  @include animation(sliderightout);
+}
+
+.slide.in.reverse {
+  @include animation(sliderightin);
+}
+
+
+//pop
+.pop.out, .pop.in {
+  -webkit-animation-timing-function: ease-in-out;
+  -webkit-animation-duration: 250ms;
+  -moz-animation-timing-function: ease-in-out;
+  -moz-animation-duration: 250ms;
+  -o-animation-timing-function: ease-in-out;
+  -o-animation-duration: 250ms;
+  animation-timing-function: ease-in-out;
+  animation-duration: 250ms;
+}
+.pop.in {
+  @include animation(popIn);
+}
+
+.pop.out {
+  @include animation(popOut);
+}
+.pop.in.reverse {
+  @include animation(popIn);
+}
+
+.pop.out.reverse {
+  @include animation(popOut);
+}
+
+//mobile only
+//flip  3D Transition
+
+.flip.in {
+  -webkit-backface-visibility: hidden !important;
+  -webkit-transform-style: preserve-3d;
+  @include animation(flipleftin);
+}
+
+.flip.out {
+  -webkit-backface-visibility: hidden !important;
+  -webkit-transform-style: preserve-3d;
+  z-index:1000;
+  background-color:inherit;
+  @include animation(flipleftout);
+
+}
+.flip.in.reverse {
+  -webkit-backface-visibility: hidden !important;
+  -webkit-transform-style: preserve-3d;
+  @include animation(fliprightin);
+}
+
+.flip.out.reverse {
+  -webkit-backface-visibility: hidden !important;
+  -webkit-transform-style: preserve-3d;
+  @include animation(fliprightout);
+}
+
+//cube  3D Transition
+
+.cube.in {
+  -webkit-transform: perspective(800);
+  -webkit-animation-duration: 5.6s;
+  -webkit-transform-origin: 0% 50%;
+  z-index:10;
+  background-color:inherit;
+  @include animation(cubeleftin);
+}
+
+.cube.out {
+  -webkit-transform: perspective(800);
+  -webkit-animation-duration: 5.6s;
+  -webkit-transform-origin: 100% 50%;
+  @include animation(cubeleftout);
+}
+
+.cube.in.reverse {
+  -webkit-transform: perspective(800);
+  -webkit-animation-duration: .6s;
+  -webkit-transform-origin: 100% 50%;
+  z-index:10;
+  background-color:inherit;
+  @include animation(cuberightin);
+}
+.cube.out.reverse {
+  -webkit-transform: perspective(800);
+  -webkit-animation-duration: .6s;
+  -webkit-transform-origin: 0% 50%;
+  @include animation(cuberightout);
+}
+
+//fadeSlide
+
+.fadeSlide.in {
+  -webkit-animation-delay: 350ms;
+  @include animation(fadeslideleftin);
+}
+.fadeSlide.out {
+  @include animation(fadeOut);
+}
+
+.fadeSlide.in.reverse {
+  -webkit-animation-delay: 350ms;
+  @include animation(fadesliderightin);
+}
+.fadeSlide.out.reverse {
+  @include animation(fadeOut);
+}
+
+
+//swap  3D Transition
+
+.swap.in {
+  -webkit-animation-duration: .7s;
+  -webkit-transform: perspective(800);
+  -webkit-animation-timing-function: ease-out;
+  z-index:10;
+  background-color:inherit;
+  @include animation(swapleftin);
+}
+.swap.out {
+  -webkit-animation-duration: .7s;
+  -webkit-transform: perspective(800);
+  -webkit-animation-timing-function: ease-out;
+  @include animation(swapleftout);
+}
+
+.swap.in.reverse {
+  -webkit-animation-duration: .7s;
+  -webkit-transform: perspective(800);
+  -webkit-animation-timing-function: ease-out;
+  z-index:10;
+  background-color:inherit;
+  @include animation(swaprightin);
+}
+.swap.out.reverse {
+  -webkit-animation-duration: .7s;
+  -webkit-transform: perspective(800);
+  -webkit-animation-timing-function: ease-out;
+  @include animation(swaprightout);
+}*/