@kissmybutton/motorcortex-animetitles v1.2.0

motorcortex-animetitles

Demo

Installation

$ npm install --save @kissmybutton/motorcortex-animetitles
# OR
$ yarn add @kissmybutton/motorcortex-animetitles

Loading

import {loadPlugin} from "@kissmybutton/motorcortex";
import TitlesPlugin from "@kissmybutton/motorcortex-animetitles";
const Titles = loadPlugin(TitlesPlugin);

Create incident

RotatedLine

const nameOfIncident = new Titles.RotatedLine(
  {
    width: 400,
    size: "XL",
    lineColor: "#ff0000",
    textColor: "#000",
    subTitle1: "test",
    subTitle2: "test2",
    subTitle3: "test3",
    title: "dokimi",
    stopOnLast: false,
    delayEnd : 3000
  },
  {
    selector: ".rotatedline"
  }
);

RotateLine Attrs

RolingText

const nameOfIncident = new Titles.RolingText(
  {
    width: 250,
    size: "L",
    lineColor: "#ff0000",
    textColor: "#000",
    subTitle1: "test",
    subTitle2: "test2",
    subTitle3: "test3",
    stopOnLast: false,
    delayEnd : 3000
  },
  {
    selector: ".rolingtext"
  }
);

Rolingtext Attrs

RotatadLineReveal

const nameOfIncident = new Titles.RotatadLineReveal(
  {
    duration: 5000,
    width: 800,
    size: "M",
    lineColor: "#ff0000",
    textColor: "#000",
    title: "Animetitle",
    subtitle: "MC Plugin",
    leftEnd: 100,
    stopOnLast: false,
    delayEnd : 3000
  },
  {
    selector: ".rotatedlinereveal"
  }
);

RotatadLineReveal Attrs

SvgBorder

const nameOfIncident = new Titles.SvgBorder(
  {
   duration: 5000,
    size: "L",
    lineColor: "#ff0000",
    textColor: "#000",
    subTitle: "Develop by",
    slogan: "-KMB-",
    title: "MotorCortex Team",
    stopOnLast: false,
    delayEnd : 3000
  },
  {
    selector: ".svgborder"
  }
);

SvgBorder Attrs

Circle

const nameOfIncident = new Titles.Circle(
  {
    fontSize: 40,
    circleColor: "#ff0000",
    textColor: "#000",
    title: "IOAN",
    subTitle: "BRAPAPAPA",
    stopOnLast: false,
    delayEnd : 3000,
    width:500
  },
  {
    selector: ".circle"
  }
);

In order to use tin incident you should include the img.svg that is in demo folder in your clip.js directory

Circle Attrs

SvgDrow

const nameOfIncident = new Titles.SvgDrow(
  {
 duration: 1600,
    width: 900,
    size: "M",
    lineColor: "#ff0000",
    strokeDashOffset: 10000,
    StrokeDashArray: 10000,
    erase: true,
    svg: `svg code`,
    stopOnLast: false,
    delayEnd : 3000
  },
  {
    selector: ".svgdrow"
  }
);

SvgDrow Attrs

LogoBox

const nameOfIncident = new Titles.LogoBox(
  {
    size: 2,
    textColor: "#fff",
    bgColor: "#000",
    subTitle1: "testdawdawddawd",
    subTitle2: "test2",
    subTitle3: "test3",
    width: 200,
    stopOnLast: false,
    logoUrl: "https://kissmybutton.github.io/motorcortex-animetitles/demo/logo.png"
  },
  {
    selector: ".logobox"
  }
);

In order to use tin incident you should include the logo.png image in your clip.js directory

LogoBox Attrs

Add incident to your clip

clipName.addIncident(nameOfIncident, 0);