Multithreaded web animations and task chaining

---

Execute general purpose JavaScript on cue with greater performance. Monkeydo is great, and designed for, complex DOM animations.

Monkeydo JSON manifest View semantics { "tasks": [ [2000,"moveTo",100,0], [1500,"setColor","red"], [2650,"setColor","blue"], [550,"moveTo",350,0] ] }

Normal JavaScript const methods = { element: document.getElementById("element"), moveTo: (x,y) => { methods.element.style.setProperty("transform",`translate(${x}%,${y}%)`); }, setColor: (color) => { methods.element.style.setProperty("background-color",color); } };

Open live demo

Use Monkeydo

Monkeydo comes as an ES6 module. In this guide we'll import this directly from a ./modules/ folder, but any location accessible by the importing script will work.

1. Import Monkeydo as an ESM

   import { default as Monkeydo } from "./modules/Monkeydo/Monkeydo.mjs";
   

2. Define your JS methods in an object

   const methods = {
     singForMe: (foo,bar) => {
       console.log(foo,bar);
     }
   }
   

3. Define your tasks in a JSON manifest (file or JSON-compatible JavaScript)

   {
     "tasks": [
       [0,"singForMe","Just like a","monkey"],
       [1200,"singForMe","I've been","dancing"],
       [160,"singForMe","my whole","life"]
     ]
   }
   

4. Initialize and run Monkeydo with your methods and manifest

   const monkey = new Monkeydo(methods);
   monkey.play(manifest);
   

The example above would be the same as running:

console.log("Just like a","monkey"); // Right away
console.log("I've been","dancing"); // 1.2 seconds after the first
console.log("my whole","life"); // and then 160 milliseconds after the second

Manifest Semantics

The JS passed to the Monkeydo constructor is executed by the initiator thread (ususally the main thread) when time is up. Which method and when is defined in a JSON file or string with the following semantics:

{ "tasks": [ [0,"myJavaSriptMethod","someArgument","anotherArgument"] ] }

Array key Description 0 Delay Wait this many milliseconds before running this method 1 Method Name of the JavaScript method to call 2+n Arguments Some amount of arguments to pass to the method