@donkeyclip/motorcortex-leonsans v1.3.2

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

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:

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