Create your own Clips and expose them as Incidents

One step higher that composite behaviours are Incidents that not only they have built-in Incidents but they also have (and render) context of their own. This way we can create Incidents that can take params (such as colors, text, images, duration, etc) and dynamically render and animate anywhere the user selects to put them.

The specific html, css to use along with the fonts and/or audioSources of your Clip can be set via getters on your Clip:

  • get html
  • get css
  • get fonts
  • get audioSources

All of which can be templated and use the initParams of their properties to dynamically set their values.

Example:

const MotorCortex = require("@kissmybutton/motorcortex");
const AnimePlugin = require("@kissmybutton/motorcortex-anime");
const Anime = MotorCortex.loadPlugin(AnimePlugin);
class flashingBox extends MotorCortex.API.Clip {
get html(){
return `
<div id="box"> </div>
`;
}
get css(){
return `
#box{
backgroundColor: ${params: initialBackground},
width: ${params.boxWidth},
height: ${params.boxHeight},
opacity: 0
}`;
}
buildTree(){
for(let i=0; i<attrs.numberOfFlashes; i++){
const flashIn = new Anime.Anime(
{
animatedAttrs: {
opacity: 1
}
}, {
selector: "#box",
duration: this.props.duration / 2*attrs.numberOfFlashes
}
);
const flashOut = new Anime.Anime(
{
animatedAttrs: {
opacity: 0
}
}, {
duration: this.props.duration / 2*attrs.numberOfFlashes
}
);
this.addIncident(flashIn, i*2*attrs.numberOfFlashes*this.props.duration);
this.addIncident(flashOut, (i*2*attrs.numberOfFlashes + 1)*this.props.duration);
}
}
}

Your Clip is now ready for export and can be imported on any other Clip. The only thing the final users / developers need to do is to set duration and selector, as normal.