Monkeydo uses the portable data format JSON to read tasks, making it easy to read by primates and machines alike.
+Execute general purpose JavaScript on cue with greater performance. Monkeydo is great, and designed for, complex DOM animations.
+
+
|
+ Monkeydo JSON manifest
+{
+ "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);
+ }
+};
+
+ |
+
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.
+Monkeydo as an ESM
+
+import { default as Monkeydo } from "./modules/Monkeydo/Monkeydo.mjs";
+
+
+const methods = {
+ singForMe: (foo,bar) => {
+ console.log(foo,bar);
+ }
+}
+
+
+{
+ "tasks": [
+ [0,"singForMe","Just like a","monkey"],
+ [1200,"singForMe","I've been","dancing"],
+ [160,"singForMe","my whole","life"]
+ ]
+}
+
+ 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
+
+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:
@@ -22,7 +96,7 @@
|
Monkeydo comes as an importable ECMAScript 6 module. In this guide we'll import this directly from a ./modules/ folder, but any web-accesible location will work.
-Monkeydo as an ES6 module
-
-import { default as Monkeydo } from "./modules/Monkeydo/Monkeydo.mjs";
-
-
-const methods = {
- myJavaScriptMethod: (foo,bar) => {
- console.log(foo,bar);
- }
-}
-
-
-{
- "tasks": [
- [0,"myJavaSriptMethod","Just like a","monkey"],
- [1200,"myJavaSriptMethod","I've been","dancing"],
- [160,"myJavaSriptMethod","my whole","life"]
- ]
-}
-
- 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
-