@donkeyclip/motorcortex-textfxs
v0.3.0
Published
textfxs plugin for MotorCortex
Downloads
8
Readme
MotorCortex-Textfxs
Table of Contents
- MotorCortex-Textfxs
- Intro / Features
- Getting Started
- Creating Incidents
- Adding Incidents in your clip
- Contributing
- License
- Sponsored by
Demo
Intro / Features
Using MotorCortex-Textfxs you can create stunning text animations.
This Plugin exposes three Incidents:
- SvgLines
- SvgExplosion
- Shadow
Getting Started
Installation
$ npm install --save @donkeyclip/motorcortex-textfxs
# OR
$ yarn add @donkeyclip/motorcortex-textfxs
Importing and loading
import { loadPlugin } from "@donkeyclip/motorcortex";
import textfx from "@donkeyclip/motorcortex-textfxs";
const Plugin = loadPlugin(textfx);
Creating Incidents
SvgLines
const SvgLines = new Plugin.SvgLines(
{
text: "SvgLines",
width: 1728,
height: 300,
background: "#22292C",
colors: ["#64d3ce", "#2a92ce82", "#ff003c", "#2a92ce2e", "#2a92ce1c"],
strokeWidth: 3,
fontSize: 250,
fontFamily: "Rubik Mono One",
},
{
selector: ".container3",
}
);
SvgLines Attrs
| Name | Are | Values | | ---------- | :------------------------------: | ------------------------------------------------: | | text | text | string | | width | total width of clip container | all positive numbers | | height | total height of clip container | all positive numbers | | background | the color of background | hex values or RGB(A) or text ("blue", "red", etc) | | colors | the list colors of svg elementes | hex values or RGB(A) or text ("blue", "red", etc) | | fontFamily | font family | string | | fontSize | size of the font | number | | fontWeight | the Weight of the font | number |
IMPORTANT
If you like to change the font family you need to include it into root clip properties
SvgExplosion
const SvgExplosion = new Plugin.SvgExplosion(
{
text: "SvgExplosion",
width: 1728,
height: 300,
background: "#22292C",
colors: [
"#FBDB4A",
"#F3934A",
"#EB547D",
"#9F6AA7",
"#5476B3",
"#2BB19B",
"#70B984",
],
fontFamily: "Rubik Mono One",
},
{
selector: ".container1",
}
);
SvgExplosion Attrs
| Name | Are | Values | | ---------- | :----------------------------: | ------------------------------------------------: | | text | text | string | | width | total width of clip container | all positive numbers | | height | total height of clip container | all positive numbers | | background | the color of background | hex values or RGB(A) or text ("blue", "red", etc) | | colors | list of colors for leter | hex values or RGB(A) or text ("blue", "red", etc) | | fontFamily | font family | string | | fontSize | size of the font | number | | fontWeight | the Weight of the font | number |
IMPORTANT
If like to change the font family you need to include it in to root clip properties
Shadow
const Shadow = new Plugin.Shadow(
{
text: "Shadow",
width: 1728,
height: 300,
background: "#d52e3f",
colors: ["#e942f5", "#efa032", "#46b59b", "#017e7f", "#052939", "#c11a2b"],
fontSize: 250,
textColor: "#fcedd8",
fontFamily: "Pacifico",
reverce: false,
},
{
selector: ".container2",
}
);
Shadow Attrs
| Name | Are | Values | | ---------- | :--------------------------------: | ------------------------------------------------: | | text | text | string | | width | total width of clip container | all positive numbers | | height | total height of clip container | all positive numbers | | background | the color of background | hex values or RGB(A) or text ("blue", "red", etc) | | colors | the list colors of svg elementes | hex values | | speed | animation speed. Defaults to 1 | num, min:0 | | textColor | the main color of text | hex values or RGB(A) or text ("blue", "red", etc) | | fontFamily | font family | string | | fontSize | size of the font | number | | reverce | reverse tha animation after finish | boolean | | fontWeight | the Weight of the font | number |
IMPORTANT
If you like to change the font family you need to include it into root clip properties
FontWeight
const FontWeight = new Clip.FontWeight(
{
width: 1920,
height: 300,
text: "FontWeight Animation",
textColor: "#ff0000",
repeats: 70,
fontSize: 20,
fontFamily: "Commissioner",
fontWeightList: [100, 200, 300, 400, 500, 600, 700, 800, 900],
rotate: 90
},
{
selector: ".container4"
}
);
FontWeight Attrs
| Name | Are | Values | | ---------- | :--------------------------------: | ------------------------------------------------: | | text | text | string | | width | total width of clip container | all positive numbers | | height | total height of clip container | all positive numbers | | textColor | the color of text | hex values or RGB(A) or text ("blue", "red", etc) | | repeats | total lines of text | number | | fontFamily | font family | string | | fontSize | size of the font | number | | rotate | degrees for rotate transformation | number | | fontWeightList | a list of all the weights that text will get | numbers |
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:
- Fork the repo on GitHub
- Clone the project to your own machine
- Commit changes to your own branch
- Push your work back up to your fork
- Submit a Pull request so that we can review your changes