Add Dance: Twirl

README.md

@@ -196,6 +196,9 @@ Here are the build in dances and their options
 + fontSize
   + min : Minimum value given to `font-width`. Default: `0.8`
   + max : Maximum value given to `font-width`. Default: `1.2`
++ twirl
+  + min : Minimum value given to `transform: rotate3d()`. Default: `-90`
+  + max : Maximum value given to `transform: rotate3d()`. Default: `90`
 
 To see each visual effect, you can go to the [Demo](https://okazari.github.io/Rythm.js/)
 

demo/example.js

@@ -78,7 +78,8 @@ window.onload = function() {
   rythm.addRythm('thanks', 'shake', 0, 10, { min: -10, max: 10 })
   rythm.addRythm('contributor-avatar', 'pulse', 0, 10, { min: 0.5, max: 1.1 })
   rythm.addRythm('contributor-login-link', 'kern', 0, 10, { min: 0, max: 5 })
-
+  rythm.addRythm('twirl1', 'twirl', 0, 10)
+
   var onMicClick = function() {
     if (rythm.stopped === false) {
       rythm.stop()

index.html

@@ -434,6 +434,18 @@ <h3>
               to:[255,0,0]
             })</pre>
         </div>
+      </section>
+            <section>
+        <h3>
+          Twirl
+        </h3>
+        <div class="demo">
+           <div class="rythm twirl1">♫</div>
+           <pre class="prettyprint">
+              rythm.addRythm('twirl1', 'twirl', 0, 10)
+          </pre>
+        </div>
+        </div>
       </section>
       <div id='playerBottom'>
           <button id='startBottom'>Start Demo</button>

src/Dancer.js

@@ -16,6 +16,7 @@ import fontSize, { reset as fontSizeReset } from './dances/font-size.js'
 import borderWidth, {
   reset as borderWidthReset,
 } from './dances/border-width.js'
+import twirl, { reset as twirlReset } from './dances/twirl.js'
 
 class Dancer {
   constructor() {
@@ -36,6 +37,7 @@ class Dancer {
     this.registerDance('kern', kern, kernReset)
     this.registerDance('borderWidth', borderWidth, borderWidthReset)
     this.registerDance('fontSize', fontSize, fontSizeReset)
+    this.registerDance('twirl', twirl, twirlReset)
   }
 
   registerDance(type, dance, reset = () => {}) {

src/dances/twirl.js

@@ -0,0 +1,15 @@
+export default (elem, value, options = {}) => {
+    let max = !isNaN(options.max) ? options.max : 90
+    let min = !isNaN(options.min) ? options.min : -90
+    if (options.direction === 'left') {
+      max = -max
+      min = -min
+    }
+    const twirl = (max - min) * value
+    elem.style.transform = `rotate3d(0, 1, 1, ${min + twirl}deg)`
+  }
+
+  export const reset = elem => {
+    elem.style.transform = ''
+  }
+