Merge pull request #5 from danielabar/feature/4-smooth-out-animations

Feature/4 smooth out animations

README.md

@@ -12,8 +12,8 @@ Original owl image [Clipart Panda](http://www.clipartpanda.com/clipart_images/ow
 
 ## TODO
 
-- [ ] Smooth out animations
-- [ ] Remove debug buttons
+- [x] Smooth out animations
+- [x] Remove debug buttons
 - [x] Build system (Webpack, ES2015 modules, SASS, rev bundle)
 - [ ] Settings (time between short breaks, time between long breaks)
 - [ ] Add help

css/_animation.scss

@@ -1,3 +1,12 @@
+@keyframes to-wobble {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(-2deg);
+  }
+}
+
 @keyframes wobble {
   0% {
     transform: rotate(-2deg);
@@ -43,6 +52,15 @@
   }
 }
 
+@keyframes to-up {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-50%);
+  }
+}
+
 @keyframes up-down {
   0% {
     transform: translateY(-50%);
@@ -52,6 +70,16 @@
   }
 }
 
+@keyframes to-up-small {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(-70%);
+  }
+}
+
+
 @keyframes up-down-small {
   0% {
     transform: translateY(-70%);

css/_app.scss

@@ -0,0 +1,29 @@
+*, *:before, *:after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  background: $app-background;
+  font-family: $app-font-stack;
+  font-weight: 300;
+  color: $app-color;
+}
+
+.message {
+  margin-top: 0.9em;
+  font-size: 4em;
+  text-align: center;
+  opacity: 1;
+  filter: grayscale(0);
+  transition: opacity 1s linear, filter 1s linear;
+}
+
+.dim {
+  opacity: 0.5;
+  filter: grayscale(75%);
+}

css/app.scss → css/_owl.scss

@@ -1,30 +1,5 @@
-*, *:before, *:after {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  height: 100%;
-}
-
-body {
-  background: #333333;
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-  font-weight: 300;
-  color: #fff;
-}
-
-.message {
-  margin-top: 0.9em;
-  font-size: 4em;
-  text-align: center;
-  opacity: 1;
-  filter: grayscale(0);
-  transition: opacity 1s linear, filter 1s linear;
-}
-
 /* http://stackoverflow.com/questions/9622354/make-a-div-center-of-viewport-horizontally-and-vertically/34084294#34084294 */
-.wrapper {
+.owl-wrapper {
   width: 100%;
   height: 100%;
   position: relative;
@@ -43,11 +18,6 @@ body {
   transition: opacity 1s linear, filter 1s linear;
 }
 
-.dim {
-  opacity: 0.5;
-  filter: grayscale(75%);
-}
-
 .owl-container {
   perspective: 100px;
   transform: translateX(70px);
@@ -60,31 +30,31 @@ body {
 
 .owl-body,
 .iris {
-  fill: #01bdc8;
+  fill: $owl-main-color;
 }
 
 .stomach,
 .sclera,
 .eye-shine {
-  fill: #fbfcfc;
+  fill: $owl-background-color;
 }
 
 .nose {
-  fill: #ea9f4b;
+  fill: $owl-accent-color;
 }
 
 .foot,
 .wing,
 .eye-liner {
-  fill: #967643;
+  fill: $owl-extremities-color;
 }
 
 .pupil {
-  fill: #000505;
+  fill: $owl-dark-color;
 }
 
 .owl-graphic.wobble {
-  animation: wobble 0.75s linear 0.5s alternate infinite;
+  animation: to-wobble 0.5s ease, wobble 0.75s linear 0.5s alternate infinite;
 }
 
 .eyes.side-to-side {
@@ -100,15 +70,15 @@ body {
 }
 
 .eyes.up-down {
-  animation: up-down 1s ease 0s alternate infinite;
+  animation: to-up 0.5s ease, up-down 1s ease 0.5s alternate infinite;
 }
 
 .left-eye-shine.up-down {
-  animation: up-down-small 1s ease 0s alternate infinite;
+  animation: to-up-small 0.5s ease, up-down-small 1s ease 0.5s alternate infinite;
 }
 
 .right-eye-shine.up-down {
-  animation: up-down-small 1s ease 0s alternate infinite;
+  animation: to-up-small 0.5s ease, up-down-small 1s ease 0.5s alternate infinite;
 }
 
 .eyes.around {

css/_vars.scss

@@ -0,0 +1,9 @@
+$app-background: #333333;
+$app-color: #fff;
+$app-font-stack: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+
+$owl-main-color: #01bdc8;
+$owl-background-color: #fbfcfc;
+$owl-accent-color: #ea9f4b;
+$owl-extremities-color: #967643;
+$owl-dark-color: #000505;

css/styles.scss

@@ -1,4 +1,9 @@
+// vendor
 @import 'reset';
 @import 'flipclock-overrides';
+
+// app
+@import 'vars';
 @import 'animation';
+@import 'owl';
 @import 'app';

docs/index.html

@@ -6,18 +6,9 @@
   <title>Eye Hoot</title>
   <link rel="shortcut icon" href="owl.ico">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css" integrity="sha256-MSeNrYhmfZbyTUAhVy7w153T7LFxQfCf/DBDjtbvZdg=" crossorigin="anonymous" />
-<link href="/styles-0ce165cbc154317bee9d.css" rel="stylesheet"></head>
+<link href="/styles-665817cf1101c0b6c734.css" rel="stylesheet"></head>
 <body>
 
-  <!-- for testing only -->
-  <section class="controls">
-    <button class="side-to-side">Side to Side</button>
-    <button class="up-down">Up Down</button>
-    <button class="around">Around</button>
-    <button class="blink">Blink</button>
-    <button class="take-a-break">Break</button>
-  </section>
-
   <!-- timer -->
   <div class="clock-container">
     <audio class="break-start" preload="auto"></audio>
@@ -27,7 +18,7 @@
 
   <div class="message"></div>
 
-  <div class="wrapper">
+  <div class="owl-wrapper">
 
     <!-- owl graphic -->
     <svg
@@ -115,5 +106,5 @@
 
   <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js" integrity="sha256-zZFgUYWREnXJDw3PMQASiGmzHVL+VNfcA5eaXhipwag=" crossorigin="anonymous"></script>
-<script type="text/javascript" src="/bundle-0ce165cbc154317bee9d.js"></script></body>
+<script type="text/javascript" src="/bundle-665817cf1101c0b6c734.js"></script></body>
 </html>