GUI for live easing property curves editing

samuel Others 270 , , , ,

MojsCurveEditor is a GUI plugin for interactive custom easings/property curves editing while crafting your animations. Part of mojs tools.


The MojsCurveEditor depends on mojs >= 0.225.2, tween autoupdates available for mojs >= 0.276.2. Please make sure you’ve linked mojs library first.

# cdn<script src=""></script># npm[sudo] npm install @mojs/curve-editor

Import MojsCurveEditor constructor to your code, depending on your environment:

const MojsCurveEditor = require('mojs-curve-editor').default;// orimport MojsCurveEditor from '@mojs/curve-editor';

If you installed it with script link – you should have MojsCurveEditor global


Construct MojsCurveEditor with the next options:

  const mojsCurve = new MojsCurveEditor({    // name of the Curve you are working on. The name is used to
    // identify record in `localStorage` to restore the state from
    // when page gets reloaded, so please specify unique names if
    // you use more than one editor on the same page.
    name: 'bounce curve'

After that you can “connect” the curve with your mojs modules by passing a “sample” of the curve to the easing property of the module, like this:

  const mojsCurve = new MojsCurveEditor();  const tween = new mojs.Tween({
    easing: mojsCurve.getEasing()
  });  // or
  const shape = new mojs.Shape({
    easing: mojsCurve.getEasing()
  });  // or as `property curve`
  const html = new mojs.Html({
    el: '#js-el',
    x: { 0: 100, curve: mojsCurve.getEasing() }

Each tween/module should have it’s out sample of the curve, this means you need to call mojsCurve.getEasing() send the sample of the curve to the easing property of modules.

If you use mojs>0.276.5 the state of the modules with the curve sample will be updated automatically.

The getEasing function receives options hash:

  easing: mojsCurve.getEasing({    // `transform` function that pipes through the current value
    // of the curve so you can transform it
    transform: (k) => { return k; }

After you are happy with the curve you made, you need to change the sample(mojsCurve.getEasing() calls) with actual path data which you can get by clicking on the code button (code button):

  const html = new mojs.Html({
    el: '#js-el',
    x: { 0: 100, easing: 'M0, 100 C0, 100 19.8984745544779, 40.10152544552211 30, 30 C40.1015254455221, 19.89847455447789 80, 45 80, 45 C80, 45 100, 0 100, 0 ' }


Constructor accepts the next options:

const curveEditor = new MojsCurveEditor({  // name of the curve editor
  name: 'bounce curve'
  // if should preserve state on page reloads
  isSaveState: true,  // start path - will be loaded on initialization of the curve,
  // e.g. before any user modifications were made. Path of 'M0, 100 L100, 0' is set by default.
  startPath: 'M0, 100 L100, 0',  // callback on path change, accepts path string
  onChange: function (path) {},  // if should hide when minimized - useful when you try to embed
  isHiddenOnMin: false});

Public Methods

curveEditor  // get `easing function` of the curve
  .getEasing()  // maximize the curve editor
  .maximize()  // minimize the curve editor
  .minimize()  // toggle `maximize/minimize` methods regarding editor's state


  • alt + z – undo curve action

  • alt + x – rendo curve action

  • alt + d – delete selected point(s)

  • [3 times] alt + \ – reset curve

All shortcuts work only for active editor – it should have orange mojs logo indicator at bottom left.


Install webpack globally:

[sudo] npm install webpack -g

Install dependencies with npm:

[sudo] npm install

Run webpack:


Please make sure you started a feature branch with the feature name (better from the dev branch) before making changes.


Related Post

Player controls for mojs. Intended to help you to craft mojs animation sequences. To be clear, this player is not needed to play mojs animations. Read more

Intro mo · js is a javascript motion graphics library that is a fast, retina ready, modular and open source. In comparison Read more

We are trying to make it easier to draw, change, and publish maps. Some of the most important geospatial data Read more

Lollipop is the perfect image editing HTML5 app for quick and straight forward editing.Features:

Is a Visual editor bookmarklet that makes modifying and commenting on web pages remarkably easy! Built with Require, jQuery, and Read more

Is a visual javascript editor for the bootstrap grid system, written as a jQuery plugin.

If you don’t have the option to use WordPress on your server or just don’t want to, the Slider Revolution Read more

Mesh is a JavaScript code editor that feels like a spreadsheet. Specifically, Mesh is a spreadsheet UI wrapper around a Read more