MotorCortex-LeonSans

Table of Contents

• MotorCortex-LeonSans
  • Demo
• Intro / Features
• Getting Started
  • Installation
  • Importing and Loading
• Creating Incidents
  • LeonSans Clip
  • LeonIncident
• Adding Incidents in your clip
• Contributing
• License
• Sponsored by

Demo

Check it out here

Intro / Features

MotorCortex-LeonSans brings some capabilities of LeonSans library into MotorCortex. With LeonSans plugin you can render exquisite text anywhere in your clip.

This Plugin exposes two Incidents:

• LeonSans Clip
• LeonIncident

Getting Started

Installation

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

Importing and loading

import { loadPlugin } from "@donkeyclip/motorcortex/";
import LeonPlugin from "@donkeyclip/motorcortex-leonsans";
const LeonSans = loadPlugin(LeonPlugin);

Creating Incidents

LeonSans Clip

By the use of the plugin's Clip you can render a canvas which will host your text.

The Clip takes a number of attributes (listed below) that define both the canvas and the rendered text characteristics and it can accept an unlimited number of LeonSans Incidents that can animate the rendered text.

Example

const clipName = new LeonSans.Clip(
  {
    canvasId: "leonObj",
    sw: 800,
    sh: 600,
    text: "abcdefghijklmn\nopqrstuvwxyz",
    weight: 100,
    round: true,
    multiply: true,
    drawing: "colorful",
    color: [["#64d3ce", "#2a92ce82", "#2a92ce40", "#2a92ce2e", "#2a92ce00"]],
    colorful: ["#64d3ce", "#2a92ce82", "#2a92ce40", "#2a92ce2e", "#2a92ce00"],
    pathGap: -1,
    patternWidth: 1,
    patternHeight: 10,
    speed: 1,
    tracking: 20,
    leading: 10,
    size: 80,
  },
  {
    selector: ".test",
  }
);

LeonSans Clip Attrs

Name	Are	Values
canvasId	the id of the rendered canvas that contains the text. This id will be used by all LeonIncident Incidents, added to the Clip timeline, via their selector property	string
sw	width of clip canvas (how many pixels)	all positive numbers
sh	height of clip canvas (how many pixels)	all positive numbers
text	the text to display	string
weight	The weight of the font	number 1 - 900
round	round the corners of font if they are not path	boolean
multiply	applying multiply effect when the font has more then 1 colors	boolean
drawing	type of the font effect	one of: drawing, pattern, colorful, colorPattern
color	The colors of the characters	array of arrays of colors
colorful	The list of colors of each character. Only applicable if drawing property is colorfull	array of colors
pathGap	The gap between each coordinate of the points on a line of each character	number
patternWidth:	the width of the lines when drawing property is pattern	number
patternHeight	the height of the lines when drawing property is pattern	number
speed	speed of color changing when drawing property is colorPattern	number, from 0 to 10
tracking	The spacing between the characters of a block of text	number
leading	The distance between each line of text	number
size	size of text	number

LeonIncident

Example

const nameOfIncident = new LeonSans.LeonIncident(
  {
    animatedAttrs: {
      LeonAtrs: {
        completion_rate: 1,
        weight: 600,
        // tracking: 20,
        leading: 10,
        // size: 90,
        // pathGap: 1,
        patternWidth: 100,
        // patternHeight: 90
      },
    },
    initialValues: {
      LeonAtrs: {
        completion_rate: 0,
        weight: 100,
        // tracking: 10,
        // leading: 1,
        size: 80,
        // pathGap: 0,
        patternWidth: 1,
        // patternHeight: 10
      },
    },
  },
  {
    duration: 2000,
    selector: "!#leonObj",
  }
);

LeonIncident Attrs

The LeonIncident attrs takes on the animatedAttrs object just one composite attribute: LeonAtrs. The supported attributes of this composite attribute are:

Name	Are	Values
completion_rate	The rate of text completion	num from 0 to 1
weight	The weight of the font: 1 - 900	number
pathGap	The gap between each coordinate of the points on a line of each character	number
patternWidth:	the width of the lines when drawing property is pattern	number
patternHeight	the height of the lines when drawing property is pattern	number
tracking	The spacing between the characters of a block of text	number
leading	The distance between each line of text	number
size	size of text	number

IMPORTANT

Along with the attributes, all LeonIncident incidents must take on their props the selector key which targets the canvas id of their parent Clip via the convention: !#<canvasId>

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