Clip as Incident

Up to now we’ve seen how we load and instantiate plugins’ Incidents, how to instantiate groups and organise our Incidents and how we form a Clip.

There are cases that we might want to define a Clip but we don’t want to directly render it on a specific host element but rather use it as Incident and position it on another Clip’s timeline and on specific elements. In such a case when instantiating a Clip we don’t pass the host key on the properties but instead we pass a selector string, just like in any other Incident case. The Clip will create as many copies of itself as the selector applies to, it will render itself in all of the elements the selector targets and it will execute (play) all copies together on root Clip execution. This kind of Clips are called “Clip As Incident” or just “CASI”.

Example:

• First we create a normal Clip positioning it on a specific host:

const rootClip = new HTMLClip({
  host: document.getElementById("app"),
  html: `
    <div class="container">
      <div class="one"></div>
      <div class="two"></div>
      <div class="one"></div>
      <div class="two"></div>
    </div>
  `,
  css: `
    .container{
      width: 600px;
      height: 800px;
    }
    .one{
      background: black;
      height: 25%;
      width: 100%;
    }
    .two{
      background: red;
      height: 25%;
      width: 100%;
    }
  `,
  containerParams: {
    width: "600px",
    height: "800px",
  },
});

• Then we create a CASI. Notice we don't provide a host but rather a selector.

const casi = new HTMLClip({
  selector: ".two",
  html: `
    <div class="container">
      <div class="text-container">\\${this.params.topText}</div>
      <div class="subtext-container">\\${this.params.subText}</div>
    </div>
  `,
  css: `
    .container{
      font-family: 'Ubuntu', sans-serif;
      background: #2fc4b2;
      text-align: center;
      text-shadow: 2px 2px 2px #000000;
    }

    .text-container{
      height: 100px;
      background: #12947f;
      font-size: 40px;
      font-weight: bold;
      color: white;
    }

    .subtext-container{
      height: 100px;
      background: #e71414;
      font-size: 30px;
      font-weight: bold;
      color: white;
    }
  `,
  fonts: [
    {
      type: "google-font",
      src: "https://fonts.googleapis.com/css2?family=Ubuntu:wght@500;700&display=swap",
    },
  ],
  containerParams: {
    width: "600px",
    height: "200px",
  },
  initParams: {
    topText: "Welcome to MotorCortex",
    subText: "This is your first Clip!",
  },
});

• Let's put some animation on our CASI

const topBgAnimation = new CSSEffect(
  {
    animatedAttrs: {
      background: "#000000",
      fontSize: "45px",
    },
  },
  {
    duration: 6000,
    selector: ".text-container",
    easing: "easeInOutQuad",
  }
);

casi.addIncident(topBgAnimation, 0);

• Finally, let's position our CASI on our root Clip, on millisecond 0 and execute our root Clip

rootClip.addIncident(casi, 0);
rootClip.play();

Check the example here