Animations

Animations

Animations are just HTMLClips with pre-defined HTML, CSS, fonts and Incidents acting as templates. The users can use them on their Clips by passing to them attributes (such as images, colours, text, etc) and the Animations render accordingly.

Attributes

The attributes that each Animation supports is 100% custom and vary from Animation to Animation and from plugin to plugin. Plugins' documentation always provides useful guidelines on how to use and parametrise them.

Properties

The properties that Animations accept are standard. Animations' properties support the following keys:

• selector: a selector string that defines the elements that the Animation should be rendered to
• duration: (optional, defaults to the orginal duration) the duration of the Animation in milliseconds. This is optional. If you don't provide it the Animation's duration will be the original duration of it (as developed by its developer)
• delay: (optional, defaults to 0) if provided add a delay before the Animation execution. Delay is provided in milliseconds
• repeats: (optional, defaults to 1) if provided it repeats the execution of the Animation as many times as the provided integer
• hiatus: (optional, defaults to 0) if provided it adds a hiatus after the Animation execution. Hiatus is provided in milliseconds
• easing: (optional, defaults to ‘linear’) The execution of an Animation, positioned on another Clip's timeline, can be eased by any of the supported easings of MotorCortex
• containerParams: (optional, object) an object that accepts either 'width', 'height' or both 'width' and 'height'. As all Animations have their original dimensions, via containerParams final users have the chance to alter them by defining their own, desired dimensions
• name: Optionally, each Animation can have a name that the user can give for easy reference
• id: (bad practice for production, use just for debugging purposes). A unique id for the Animation

Example

Let's create a Clip that uses both Effects and Animations, from various plugins

import "./styles.css";

// first import MotorCortex
import MotorCortex from "@donkeyclip/motorcortex";

// import @donkeyclip/motorcortex-player player plugin
import Player from "@donkeyclip/motorcortex-player";

// import and load @donkeyclip/motorcortex-animetitles plugin
import AnimeTitlesPluginDefinition from "@donkeyclip/motorcortex-animetitles";
const AnimeTitlesPlugin = MotorCortex.loadPlugin(AnimeTitlesPluginDefinition);

// import and load @donkeyclip/motorcortex-backgrounds plugin
import BackgroundsPluginDefinition from "@donkeyclip/motorcortex-backgrounds";
const BgPlugin = MotorCortex.loadPlugin(BackgroundsPluginDefinition);

// create an HTMLClip
const myClip = new MotorCortex.HTMLClip({
  host: document.getElementById("app"),
  html: (initParams) => (
    <div class="container">
      <div class="layer layer-1"></div>
      <div class="layer layer-2"></div>
      <div class="layer layer-3">
        <p>This sample Clip</p>
        <p>uses two different plugins' Animations</p>
        <p>combined.</p>
      </div>
    </div>
  ),
  css: `
    .container{
      background: black;
      position: relative;
      width: 600px;
      height: 400px;
    }
    .layer{
      position: absolute;
      width: 600px;
      height: 400px;
    }
    .layer-1{
      z-index: 1;
    }
    .layer-2{
      z-index: 2;
      top: 100px;
    }
    .layer-3{
      z-index: 3;
      color: white;
      text-align: center;
      padding-top: 100px;
      font-size: 20px;
    }
    .layer-3 p{
      font-family: 'Open Sans', sans-serif;
      opacity: 0;
    }
  `,
  fonts: [
    {
      type: "google-font",
      src: "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap",
    },
  ],
  containerParams: {
    width: "600px",
    height: "400px",
  },
});

// crate a motorcortex-backgrounds plugin's Incident
// Grid is an Animation
const grid = new BgPlugin.Grid(
  {
    width: 600,
    height: 400,
    color: "#FFF",
    columns: 6,
    rows: 4,
    timing: 2.5,
  },
  {
    selector: ".layer-1",
  }
);

// create a motorcortex-animetitles plugin's Incident
// RotatadLineReveal is an Animation
const title1 = new AnimeTitlesPlugin.RotatadLineReveal(
  {
    duration: 7500,
    width: 600,
    size: "M",
    lineColor: "#ffff00",
    textColor: "#FFF",
    title: "RotatadLineReveal",
    subtitle: "animetitles plugin Animation",
    leftEnd: 100,
    stopOnLast: false,
    delayEnd: 200,
  },
  {
    selector: ".layer-2",
  }
);

const opacityIncident = new MotorCortex.CSSEffect(
  {
    animatedAttrs: {
      opacity: 1,
    },
  },
  {
    selector: ".layer-3 p",
    duration: 2000,
    delay: "@stagger(0, 1000)",
  }
);

// we add our Incidents on our Clip's timeline
myClip.addIncident(grid, 0);
myClip.addIncident(title1, 1000);
myClip.addIncident(opacityIncident, 7800);

// assign to Player the execution of our Clip
const player = new Player({ clip: myClip });

Result (codesandbox):

This example uses two different Animations from two different plugins.

• Animations
  • motorcortex-animetitles > RotatadLineReveal
  • motorcortex-backgrounds > Grid