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.
- Import
Monkeydo
as an ESMimport { default as Monkeydo } from "./modules/Monkeydo/Monkeydo.mjs";
- Define your JS methods in an object
const methods = { singForMe: (foo,bar) => { console.log(foo,bar); } }
- 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"] ] }
- Initialize and run
Monkeydo
with your methods and manifestconst 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:
{
"tasks": [
[0,"myJavaSriptMethod","someArgument","anotherArgument"]
]
} |
|