notoriousb1t

.ready
   - var t = -1
   - var n = -1
   .letter.R
      while n++ < 10
        .block(style={ "--index": ++t, "--angle": (147 * t) % 360, "--sign": t % 2 ? 1 : -1, "grid-area": "a" + (n+1) })
          .face.face-1
          .face.face-2
          .face.face-3

notoriousb1t

<div id="app">
   <div>
      <button @click="task.start()">Start</button>   
      <button @click="task.stop()">Stop</button>
   </div>
   <textarea class="log">{{log}}</textarea>
</div>

notoriousb1t

<div class="rainbow">RAINBOW</div>

notoriousb1t

/** 
* This shortcut function returns a timeline that you could build upon.
* a single value is assumed to be the end value
* this autoplays as it is intended to be fire and forget
*/
JA.to('.target', 800, { opacity: 0 })

notoriousb1t

// declare timeline with references
const t1 = just.timeline({
    // false to ignore global definitions for references and props
    globals: false,
    references: {
        entrance: "ease-out"
    },
    props: {
        x: {...} // property definitions
    }

notoriousb1t

const machine = LIBRARY.StateMachine({
    /* ... json data ... */
}) 

// move to the state
machine.transition('initial')

// move to both states simultaneously
machine.transition(['initial', 'secondary'])

notoriousb1t

<!-- DO NOT REMOVE: imports current just-animate version -->
[[[http://codepen.io/notoriousb1t/pen/bwqqoB]]]
<!-- DO NOT REMOVE: imports current just-animate version -->

 <div class="text-center">
     <div class="well">
         <span id="one" class="step">Step 1</span>
         <strong id="two" class="step">Step 2</strong>
         <em id="three" class="step">Step 3</em>
         <span id="four" class="step">Step 4</span>

notoriousb1t

# define mapper function
map <- function(list, fn) {
    i <- 0;
    len <- length(list);
    result <- vector(length = len);

    while (i < len) {
        i <- i + 1;
        result[i] <- fn(list[i]);
    }