initial support for nanoseconds

Webview/index.css

@@ -56,12 +56,12 @@ flap-bottom-flip {
 flap-top-flip {
   display: none;
   transform-origin: 100% 100%;
-  animation: flip-top-down 300ms ease-in;
+  animation: flip-top-down var(--anim) ease-in;
 }
 flap-bottom-flip {
   display: none;
   transform-origin: 100% 0%;
-  animation: flip-bottom-down 150ms ease-out;
+  animation: flip-bottom-down var(--anim) ease-out;
 }
 
 flap-top > n,

Webview/index.js

@@ -1,22 +1,25 @@
 'use strict';
 
 var digits = [];
+const digitDict = {};
 
 function getEpoch() {
-  return Date.now().toString().slice(0,-3);
+  return Date.now().toString();
 }
 
-function createDigit() {
+function createDigit(i) {
+  var anim = [10, 11, 12].includes(i) ? 30 : (10-i) * 300;
+  var anim2 = Math.floor(anim/2)
   var digit = document.createElement('digit');
-  digit.innerHTML = '\
+  digit.innerHTML = `\
   <flap-top>          <n></n>   </flap-top>\
-  <flap-top-flip>     <n></n>   </flap-top-flip>\
+  <flap-top-flip style="--anim: ${anim}ms;">     <n></n>   </flap-top-flip>\
   <flap-bottom>       <n></n>   </flap-bottom>\
-  <flap-bottom-flip>  <n></n>   </flap-bottom-flip>';
+  <flap-bottom-flip style="--anim: ${anim2}ms;">  <n></n>   </flap-bottom-flip>`;
   return digit;
 }
 
-function flipDigitTo(digit, currentVal, updatedVal) {
+function flipDigitTo(digit, currentVal, updatedVal, i) {
   var topFlapNum        = digit.querySelector('flap-top > n'),
       topFlapFlip       = digit.querySelector('flap-top-flip'),
       topFlapFlipNum    = topFlapFlip.querySelector('n'),
@@ -32,56 +35,48 @@ function flipDigitTo(digit, currentVal, updatedVal) {
 
   setTimeout(function() {
     topFlapFlip.style.display = 'none';
-  }, 300);
+  }, [10, 11, 12].includes(i) ? 30 : (10-i) * 300);
 
   setTimeout(function() {
     bottomFlapFlipNum.innerHTML = updatedVal;
     bottomFlapFlip.style.display = 'block';
-  }, 300);
+  }, [10, 11, 12].includes(i) ? 30 : (10-i) * 300);
 
   setTimeout(function() {
     bottomFlapNum.innerHTML = updatedVal;
     bottomFlapFlip.style.display = 'none';
-  }, 450);
+  }, [10, 11, 12].includes(i) ? 45 : (10-i) * 450);
 
   digit.setAttribute('current-val', updatedVal);
 }
 
 function updateClock() {
   var epoch = getEpoch(),
-      staggerDelay,
       currentVal,
       updatedVal,
       i;
 
   for (i = 0; i < epoch.length; i+=1) {
-    if(i === epoch.length-1) {
-      staggerDelay = 0;
-    } else {
-      staggerDelay = Math.random() * 400;
-    }
     currentVal = digits[i].getAttribute('current-val');
     updatedVal = epoch[i];
     if(currentVal !== updatedVal) {
-      setTimeout(flipDigitTo, staggerDelay, digits[i], currentVal, updatedVal);
+      setTimeout(flipDigitTo, 0, digits[i], currentVal, updatedVal, i);
     }
   }
 }
 
 function setupClock() {
   var epoch = getEpoch(),
-      staggerDelay,
       digit,
       i;
 
   for (i = 0; i < epoch.length; i+=1) {
-    digit = createDigit();
-    staggerDelay = Math.random() * 400;
+    digit = createDigit(i);
     document.body.appendChild(digit);
-    setTimeout(flipDigitTo, staggerDelay, digit, null, epoch[i]);
+    setTimeout(flipDigitTo, 0, digit, null, epoch[i], i);
   }
   digits = document.querySelectorAll('digit');
 }
 
 setupClock();
-setInterval(updateClock, 1000);
+setInterval(updateClock, 1);