MotorCortex-Abstracts

Table of Contents

• MotorCortex-Abstracts
  • Demo
• Intro / Features
• Getting Started
  • Installation
  • Importing and Loading
• Creating Incidents
  • CrossMoveRight
  • CrossMoveRightOutline
  • CrossRandom
  • CrossRowReveal
  • VerticalLinesMove
  • HorizontalLinesMove
  • CircleExplosion
  • CircleBubbleUp
  • Dots
• Adding Incidents in your clip
• Contributing
• License
• Sponsored by

Demo

Check it out here

Intro / Features

MotorCortex-Abstracts helps you add cross, line, circle, dot and bubble effects in your clip in an easy way.

This Plugin exposes nine Incidents:

• CrossMoveRight
• CrossMoveRightOutline
• CrossRandom
• CrossRowReveal
• VerticalLinesMove
• HorizontalLinesMove
• CircleExplosion
• CircleBubbleUp
• Dots

Getting Started

Installation

$ npm install --save @donkeyclip/motorcortex-abstracts
# OR
$ yarn add @donkeyclip/motorcortex-abstracts

Importing and Loading

import { loadPlugin } from "@donkeyclip/motorcortex";
import AbstractsDefinition from "@donkeyclip/motorcortex-abstracts";
const Plugin = loadPlugin(AbstractsDefinition);

Creating Incidents

CrossMoveRight

const CrossMoveRight = new Plugin.CrossMoveRight(
  {
    width: 425,
    height: 240,
    crossSize: 30,
    crossThiknes: 5,
    travelDistance: 240,
    items: 3,
    color: "#8300ff",
  },
  {
    selector: ".container1",
  }
);

CrossMoveRight Attrs

| Name | Are | Values | | -------------- | :-------------------------------------: | --------------------: | | width | width of incident | num | | height | height of incident | num | | crossSize | height and width of cross | num | | crossThickness | cross line thickness | num | | travelDistance | how far cross will move | num | | items | how many crosses will be in an incident | num | | color | color of the crosses | hex,rgb or color name |

CrossMoveRightOutline

const CrossMoveRightOutline = new Plugin.CrossMoveRightOutline(
  {
    width: 425,
    height: 240,
    crossSize: 30,
    travelDistance: 240,
    steps: 5,
    color: "#8300ff",
  },
  {
    selector: ".container2",
  }
);

CrossMoveRightOutline Attrs

| Name | Are | Values | | -------------- | :---------------------------------------------: | --------------------: | | width | width of incident | num | | height | height of incident | num | | crossSize | height and width of cross | num | | travelDistance | how far cross will move | num | | steps | how many steps will cross make to reach the end | num | | color | color of the crosses | hex,rgb or color name |

CrossRandom

const CrossRandom = new Plugin.CrossRandom(
  {
    width: 425,
    crossSize: 30,
    crossThickness: 5,
    items: 12,
    color: "#8300ff",
    rows: 3,
    timing: 0.5,
  },
  {
    selector: ".container3",
  }
);

CrossRandom Attrs

| Name | Are | Values | | -------------- | :----------------------------: | --------------------: | | width | width of incident | num | | crossSize | height and width of cross | num | | crossThickness | cross line thickness | num | | items | how many cross will be | num | | color | color of the crosses | hex,rgb or color name | | rows | how many rows of cross will be | num | | timing | incident duration multiplier | num |

CrossRowReveal

const CrossRowReveal = new Plugin.CrossRowReveal(
  {
    width: 425,
    crossSize: 30,
    crossThickness: 5,
    items: 8,
    color: "#8300ff",
    reverse: false,
    timing: 1,
  },
  {
    selector: ".container9",
  }
);

CrossRowReveal Attrs

| Name | Are | Values | | -------------- | :------------------------------------------------------------: | --------------------: | | width | width of incident | num | | height | height of incident | num | | crossSize | height and width of cross | num | | crossThickness | cross line thickness | num | | items | how many crosses will be in an incident | num | | color | color of the crosses | hex,rgb or color name | | reverse | if crosses will be revealed from left to right or the opposite | boolean | | timing | incident duration multiplier | num |

VerticalLinesMove

const VerticalLinesMove = new Plugin.VerticalLinesMove(
  {
    width: 425,
    height: 240,
    maxLineWidth: 250,
    color: "#8300ff",
  },
  {
    selector: ".container4",
  }
);

VerticalLinesMove Attrs

| Name | Are | Values | | ------------ | :-------------------------: | --------------------: | | width | width of incident | num | | height | height of incident | num | | maxLineWidth | the maximum width of a line | num | | color | color of the crosses | hex,rgb or color name |

HorizontalLinesMove

const HorizontalLinesMove = new Plugin.HorizontalLinesMove(
  {
    width: 425,
    height: 240,
    maxLineHeight: 50,
    color: "#8300ff",
  },
  {
    selector: ".container7",
  }
);

HorizontalLinesMove Attrs

| Name | Are | Values | | ------------ | :-------------------------: | --------------------: | | width | width of incident | num | | height | height of incident | num | | maxLineWidth | the maximum width of a line | num | | color | color of the crosses | hex,rgb or color name |

CircleExplosion

const CircleExplosion = new Plugin.CircleExplosion(
  {
    width: 425,
    height: 240,
    maxCirlcleSize: 30,
    travelDistance: 200,
    color: "#8300ff",
    items: 5,
    minR: 0,
    maxR: 180,
    border: true,
  },
  {
    selector: ".container5",
  }
);

CircleExplosion Attrs

| Name | Are | Values | | -------------- | :-------------------------------------------: | --------------------: | | width | width of incident | num | | height | height of incident | num | | maxCirlcleSize | the maximum size of a circle | num | | travelDistance | how far cross will move | num | | color | color of the crosses | hex,rgb or color name | | items | how many circles will be | num | | minR | indicate the minimum angle of circle movement | num | | maxR | indicate the maximum angle of circle movement | num | | border | if circle will be hollow | boolean |

CircleBubbleUp

const CircleBubbleUp = new Plugin.CircleBubbleUp(
  {
    width: 425,
    height: 240,
    maxCirlcleSize: 30,
    travelDistance: 200,
    color: "#8300ff",
    items: 5,
    border: true,
  },
  {
    selector: ".container6",
  }
);

CircleBubbleUp Attrs

| Name | Are | Values | | -------------- | :--------------------------: | --------------------: | | width | width of incident | num | | height | height of incident | num | | maxCirlcleSize | the maximum size of a circle | num | | travelDistance | how far cross will move | num | | color | color of the crosses | hex,rgb or color name | | items | how many circles will be | num | | border | if circle will be hollow | boolean |

Dots

const Dots = new Plugin.Dots(
  {
    width: 425,
    dotSize: 10,
    items: 28,
    color: "#8300ff",
    rowGap: 30,
    columnGap: 50,
    rows: 7,
    timing: 1.5,
    repeats: 3,
  },
  {
    selector: ".container8",
  }
);

Dots Attrs

| Name | Are | Values | | --------- | :----------------------------------: | --------------------: | | width | width of incident | num | | height | height of incident | num | | dotSize | the size of a dots | num | | color | color of the crosses | hex,rgb or color name | | rowGap | the gap between every row of dots | num | | columnGap | the gap between every column of dots | num | | items | how many dots will be | num | | rows | how many rows of dots will be | num | | timing | incident duration multiplier | num | | repeats | how many times dots will be flashing | num |

Adding Incidents in your clip

clipName.addIncident(incidentName,startTime);

Contributing

In general, we follow the "fork-and-pull" Git workflow, so if you want to submit patches and additions you should follow the next steps:

1. Fork the repo on GitHub
2. Clone the project to your own machine
3. Commit changes to your own branch
4. Push your work back up to your fork
5. Submit a Pull request so that we can review your changes

License

MIT License

Sponsored by