add draft for the next version loadin.css

Author: zbryikt

viewer/.gitignore

@@ -0,0 +1 @@
+node_modules

viewer/animation/beat/index.css

@@ -0,0 +1,88 @@
+@-moz-keyframes beat {
+  0% {
+    transform: scale(0.9);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+  33.333333333333336% {
+    transform: scale(0.7);
+    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+  }
+  66.66666666666667% {
+    transform: scale(0.9);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+  83.33333333333334% {
+    transform: scale(0.7);
+    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+  }
+  100% {
+    transform: scale(0.9);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+}
+@-webkit-keyframes beat {
+  0% {
+    transform: scale(0.9);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+  33.333333333333336% {
+    transform: scale(0.7);
+    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+  }
+  66.66666666666667% {
+    transform: scale(0.9);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+  83.33333333333334% {
+    transform: scale(0.7);
+    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+  }
+  100% {
+    transform: scale(0.9);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+}
+@-o-keyframes beat {
+  0% {
+    transform: scale(0.9);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+  33.333333333333336% {
+    transform: scale(0.7);
+    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+  }
+  66.66666666666667% {
+    transform: scale(0.9);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+  83.33333333333334% {
+    transform: scale(0.7);
+    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+  }
+  100% {
+    transform: scale(0.9);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+}
+@keyframes beat {
+  0% {
+    transform: scale(0.9);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+  33.333333333333336% {
+    transform: scale(0.7);
+    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+  }
+  66.66666666666667% {
+    transform: scale(0.9);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+  83.33333333333334% {
+    transform: scale(0.7);
+    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
+  }
+  100% {
+    transform: scale(0.9);
+    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
+  }
+}

viewer/animation/beat/index.styl

@@ -0,0 +1,38 @@
+
+//- jump
+rate = 0.3
+r = 0.6
+N = 3
+R = 100 * (r - 1) / (r ** (N + 1) - 1)
+D = -50px
+k = 1.1
+alpha = 1
+
+//- bounce
+N = 1
+rate = .5
+r = .5
+R = 100 * (r - 1) / (r ** (N + 1) - 1)
+k = 0
+D = 0.7
+mD = 0.9
+alpha = 0.9
+
+@keyframes beat
+  0%
+    transform: scale(mD)
+    animation-timing-function: cubic-bezier(0,rate,1 - rate, 1)
+  for num in (0..N)
+    p = (r ** ( num + 1 ) - 1) / (r - 1)
+    p2 = p - (r ** num) * 0.5
+    d2 = D * ((r ** k) ** num)
+    {R * 1% * p2 }
+      transform: scale(d2)
+      animation-timing-function: cubic-bezier(rate,0,1,1 - rate)
+    {R * 1% * p}
+      transform: scale(mD)
+      animation-timing-function: cubic-bezier(0,rate,1 - rate, 1)
+
+rate = 0.3
+offset = 50px
+

viewer/animation/bounce/base.styl

@@ -0,0 +1,20 @@
+//- module
+
+bounce(name, dur, iterations, accelerate, decay, power, offset, func)
+  R = 100 * (decay - 1) / (decay ** (iterations + 1) - 1)
+  .{name}
+    animation: unquote(name) dur linear infinite
+  @keyframes {name}
+    0%
+      func(0,0)
+      timing-speed-down(accelerate)
+    for num in (0..iterations)
+      p = (decay ** ( num + 1 ) - 1) / (decay - 1)
+      p2 = p - (decay ** num) * 0.5
+      d = offset * ((decay ** power) ** num)
+      {R * 1% * p2 }
+        func(d,num * 2 + 1)
+        timing-speed-up(accelerate)
+      {R * 1% * p}
+        func(0,num * 2 + 2)
+        timing-speed-down(accelerate)

viewer/animation/bounce/beat.js

@@ -0,0 +1,16 @@
+
+ret = do
+  name: \beat
+  desc: ''
+  edit: do
+    iterations: default: 1, type: \number, min: 0, max: 10
+    accelerate: default: 0.4, type: \number, min: 0, max: 1, step: 0.1
+    decay: default: 0.5, type: \number, min: 0, max: 1, step: 0.1
+    power: default: 1.1, type: \number, min:0, max: 10, step: 0.1
+    offset: default: 0.2, type: \number, min: 0, max: 1
+  code: (config) ->  
+    """
+    bounce("ld-beat", config.dur, config.iterations, config.accelerate, config.decay, config.power, config.offset,@(v) { transform: scale(1 + config.offset - v) })
+    """
+
+if module? => module.exports = ret

viewer/animation/bounce/beat.ls

@@ -0,0 +1,15 @@
+ret = do
+  name: \bounce-alt
+  desc: ''
+  edit: do
+    iterations: default: 0, type: \number, min: 0, max: 10
+    accelerate: default: 0.5, type: \number, min: 0, max: 1, step: 0.1
+    decay: default: 0.5, type: \number, min: 0, max: 1, step: 0.1
+    power: default: 0, type: \number, min:0, max: 10, step: 0.1
+    offset: default: -14, type: \number, unit: \px, min: -100, max: 100
+  code: (config) ->  
+    """
+    bounce("ld-bounce-alt", config.dur, config.iterations, config.accelerate, config.decay, config.power, config.offset,@(v) { transform: translate(0,v) })
+    """
+
+if module? => module.exports = ret

viewer/animation/bounce/bounce-alt.js

@@ -0,0 +1,16 @@
+
+ret = do
+  name: \jump
+  desc: ''
+  edit: do
+    iterations: default: 5, type: \number, min: 0, max: 10
+    accelerate: default: 0.4, type: \number, min: 0, max: 1, step: 0.1
+    decay: default: 0.6, type: \number, min: 0, max: 1, step: 0.1
+    power: default: 1.1, type: \number, min:0, max: 10, step: 0.1
+    offset: default: -14, type: \number, unit: \px, min: -100, max: 100
+  code: (config) ->  
+    """
+    bounce("ld-jump", config.dur, config.iterations, config.accelerate, config.decay, config.power, config.offset,@(v) { transform: translate(0,v) })
+    """
+
+if module? => module.exports = ret