MotorCortex-mc-essentials

Table of Contents

• MotorCortex-mc-essentials
  • Description
  • Demo
• Incidents
  • Animation
• Getting Started
  • Installation
  • Importing and Using the Plugin
• Using the Animation Incident
  • Ready-to-Use Animations
  • Custom Keyframes
• Contributing
• License
• Sponsored by

Description

mc-essentials provides developers with a range of convenient CSS animations such as flash, bounce, etc., while also accepting custom keyframes for creating unique animation combinations.

Demo

Check out the demo here

Incidents

Animation

The Animation incident can take an object in its attributes, which may have either the keyframes key for defining custom keyframes or the animation key to use one of the plugin's ready-made animations.

Getting Started

Installation

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

Importing and using the plugin

import { loadPlugin } from "@kissmybutton/motorcortex";
import MCEssentials from "@kissmybutton/motorcortex-mc-essentials";
const EssentialsPlugin = loadPlugin(MCEssentials);

Using the Animation Incident

Ready-to-Use Animations

The list of available animations includes:

• pulse
• bounce
• flash
• heartBeat
• jello
• backInDown
• backInLeft
• backInRight
• backInUp
• backOutDown
• backOutLeft
• backOutRight
• backOutUp
• bounceIn
• bounceInDown
• bounceInLeft
• bounceInRight
• bounceOut
• bounceOutDown
• bounceOutLeft
• bounceOutRight
• bounceOutUp
• fadeInDown
• fadeInLeft
• fadeInRight
• fadeInUp
• fadeOutDown
• fadeOutLeft
• fadeOutRight
• fadeOutUp
• flipInX
• headShake
• rubberBand
• shakeX
• shakeY
• tada

import { loadPlugin } from "@kissmybutton/motorcortex";
import MCEssentials from "@kissmybutton/motorcortex-mc-essentials";
const EssentialsPlugin = loadPlugin(MCEssentials);

const bounceAnimation = new EssentialsPlugin.Animation(
  {
    animation: "bounce",
  },
  {
    selector: ".classA",
    duration: 1000,
    easing: "linear",
  }
);

Custom Keyframes

For custom keyframes, users can define the CSS attributes' values animations by specifying their values at various percentages of the animation. The easing key is supported and defines the easing of the animation from the previous step to the current one.

Example:

const animation = new EssentialsPlugin.Animation(
  {
    keyframes: {
      0: {
        top: "20px",
        width: "400px",
        easing: "easeInOutQuad",
      },
      50: {
        easing: "easeInOutQuad",
        top: "200px",
        width: "200px",
        background: "pink",
      },
      100: {
        width: "10px",
        background: "red",
        easing: "easeInOutQuad",
      },
    },
  },
  {
    selector: ".classA",
    duration: 1000,
    easing: "linear",
  }
);

Contributing

Please refer to the general guidelines for contributing to MotorCortex plugins.

License

MIT License

Sponsored by