Clip

The Clip in MotorCortex

The Clip in MotorCortex is en entity that has the following characteristics:

  • It owns a context
  • It has a timeline
  • It can accept any Group or Incident on its timeline
  • Under the hood, it is responsible of checking and handling Incidents addition, edit and removal

The Context

The key-word to notice on these characteristics is the context. The context is anything that contains elements that can be accessed via selectors.

The implemented and provided by MotorCortex, HTMLClip is just one of the possible implementations.

HTMLClip

HTMLClip defines and owns an isolated context (consisting of HTML and CSS), renders itself on any DOM element and of course it provides a timeline that can accept Incidents.

Incidents added to an HTMLClip's timeline most usually animate elements of the Clip's context or they are just other Clips that have their own context, timeline and duration, and so on.

HTMLClip renders itself by the use of shadow DOM. If shadow DOM is not supported by the browser it falls back to iframe. This way HTMLClip keeps itself isolated from any CSS or js of the parent document.

Example

Let’s create our first HTMLClip.

Once you load the library you can create a new HTMLClip using the following syntax:

import MotorCortex from "@kissmybutton/motorcortex";
// load anime plugin
import MCAnimeDefinition from "@kissmybutton/motorcortex-anime";
const MCAnime = MotorCortex.loadPlugin(MCAnimeDefinition);
// Clip definition
const myClip = new MotorCortex.HTMLClip({
host: document.getElementById("app"),
html: `
<div class="container">
<div class="circle circle-a"></div>
<div class="circle circle-b"></div>
<div class="circle circle-c"></div>
<div class="text-container"><%= initParams.text %></div>
</div>
`,
css: `
.container{
position: relative;
width: 600px;
height: 400px;
font-family: 'Ubuntu', sans-serif;
text-align: center;
text-shadow: 2px 2px 2px #444;
background: whitesmoke;
}
.circle{
transform: scale(0);
opacity: 0.7;
position: absolute;
border-radius: 100%;
}
.circle-a{
top: 2%;
left: 15%;
width: 390px;
height: 390px;
background: #f72585;
}
.circle-b{
top: 18%;
left: 8%;
width: 320px;
height: 320px;
background: #7209b7;
}
.circle-c{
top: 11%;
right: 15%;
width: 210px;
height: 210px;
background: #3a0ca3;
}
.text-container{
transform: scale(0);
position: absolute;
top: 55%;
left: 15%;
color: whitesmoke;
font-size: 26px;
}
`,
fonts: [
{
type: "google-font",
src:
"https://fonts.googleapis.com/css2?family=Ubuntu:[email protected];700&display=swap"
}
],
containerParams: {
width: "600px",
height: "400px"
},
initParams: {
text: "Hello MotorCortex!"
}
});
// Effect Definition
const myEffect = new MCAnime.Anime(
{
animatedAttrs: {
transform: {
scaleX: 1,
scaleY: 1
}
}
},
{
selector: ".container>div",
duration: "@stagger(400, 1200, 0, easeOutCubic)",
delay: "@stagger(0, 200)",
easing: "easeOutBounce"
}
);
// Add Effect to Clip
myClip.addIncident(myEffect, 0);
// Play the Clip
myClip.play();

Result (codesandbox):


We have created our HTMLClip, which provides the context (HTML / CSS), has a timeline and it’s ready to accept Groups & Incidents.

API

The Clip’s supported properties are:

KeyTypeComments
hostHTMLElementDefines the HTML element that the HTMLClip is going to be rendered in
htmlEJS template stringA string containing html as an EJS template. You can use <%= initParams.<key> %> anywhere in your html. The value of each initParams.<key> will be retrieved from the initiParams passed to the HTMLClip. Of course you can use any other functionality provided by EJS
cssEJS template stringA string containing css as an EJS template. You can use <%= initParams.<key> %> anywhere in your css. The value of each initParams.<key> will be retrieved from the initiParams passed to the HTMLClip. Of course you can use any other functionality provided by EJS
initParamsObjectA key-value pairs object. This object can be used both on the html and css templates of the Clip and as dynamic values for Incidents (@initParams.<path>) or even on @expression (e.g. @expression(initParams.<path>) )
fontsArrayA list of fonts you might want to load on your Clip in an array format. Each font should be provided on the following format:
{ type: "google-font", src: "the src of the font as provided by google"}
Only “google-font” type is supported at the moment.
containerParamsObject(optional) An object that accepts two keys: width & height which set the preferred width & height of the HTMLClip. Both should be a valid CSS value strings such as “400px” or “100%”
namestring(optional) A name for your HTMLClip
id (just for development purposes)string(bad practice for production, use just for debugging purposes). The id of the HTMLClip