Combo

Combo provides a convenient way to define composite Incidents, consisting of many (and of different types) Incidents, positioned on specific milliseconds within the Combo.

Example

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="super-container first">
<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>
</div>
<div class="super-container second">
<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.secondText %></div>
</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;
}
.super-container.second .circle-a{
background: #D4C1EC;
}
.circle-b{
top: 18%;
left: 10%;
width: 320px;
height: 320px;
background: #7209b7;
}
.super-container.second .circle-b{
background: #9F9FED;
left: 36%;
}
.circle-c{
top: 11%;
right: 15%;
width: 210px;
height: 210px;
background: #3a0ca3;
}
.super-container.second .circle-c{
background: #736CED;
right: 50%;
}
.text-container{
transform: scale(10);
opacity: 0;
position: absolute;
top: 55%;
left: 15%;
color: whitesmoke;
font-size: 26px;
}
.second .text-container{
left: 55%;
}
`,
fonts: [
{
type: "google-font",
src:
"https://fonts.googleapis.com/css2?family=Ubuntu:[email protected];700&display=swap"
}
],
containerParams: {
width: "600px",
height: "800px"
},
initParams: {
text: "Hello MotorCortex!",
secondText: "Have fun!!"
}
});
// Combo Definition
const myCombo = new MotorCortex.Combo(
{
incidents: [
{
incidentClass: MCAnime.Anime,
attrs: {
animatedAttrs: {
transform: {
scaleX: 1,
scaleY: 1
},
opacity: 1
}
},
props: {
selector: ".text-container",
duration: 1200,
easing: "easeInBack"
},
position: 0
},
{
incidentClass: MCAnime.Anime,
attrs: {
animatedAttrs: {
transform: {
scaleX: 1,
scaleY: 1
}
}
},
props: {
selector: ".circle",
duration: 1200,
delay: "@stagger(0, 500, 0, easeOutCubic)",
easing: "easeOutBounce"
},
position: 900
}
]
},
{
selector: ".super-container",
delay: "@stagger(0, 900)"
}
);
// Add Combo to Clip
myClip.addIncident(myCombo, 0);
// Play the Clip
myClip.play();

API

The Combo Incident takes both attrs and props.

attrs

The attrs have only one key, the “incidents” which is a collection of Incidents that form the Combo. These incidents are called the “internal Incidents”. Each internal Incident must have the following keys:

  • incidentClass: the class of the Incident we want to position on our Combo
  • attrs: the attributes of the Incident
  • props: the props of the Incident
  • position: the position of the Incident in the Combo, as always in milliseconds

props

The props accepted by a Combo are the following:

  • selector: the selector to apply the Combo
  • delay: the delay of the Combo in milliseconds
  • hiatus: the hiatus of Combo in milliseconds
  • repeats: the number of repeats (default = 0)

The selector of the Combo’s props defines the target elements of the Combo. For each of these elements the full Combo is applied. If the internal Incidents do not have a selector then they directly refer to the Combo’s element. If they have a selector then they target the elements that apply to this selector and that are within the Combo element. In other words:

  • If we have a Combo with selector “.combo-element” and an internal Incident with no selector, the internal Incident is applied directly to “.combo-element”
  • If we have a Combo with selector “.combo-selector” and an internal Incident with selector “.internal” then the internal Incident applies on “.combo-selector .internal”

Differences with Group

The main differences of a Combo compared to a Group is that:

  • When defining a Group you add already initialised Incidents to it, so these Incidents continue to exist autonomously. You can edit these Incidents, remove them from the Group, place them on another Group and so on. On Combos that’s not the case. A Combo is a distinct / fix element and its internal Incidents are not directly accessible from the outside
  • Combos can accept delay, hiatus and repeats while Groups not