mojs/mojs-curve-editor

# npm
npm install @mojs/curve-editor

# cdn
<script src="https://cdn.jsdelivr.net/npm/@mojs/curve-editor"></script>

const MojsCurveEditor = require('mojs-curve-editor').default;

// or
import MojsCurveEditor from '@mojs/curve-editor';

  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'
  });

  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()
    }
  });

  easing: mojsCurve.getEasing({

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

  const html = new mojs.Html({
    el: '#js-el',
    x: {
      0: 100,
      easing: 'M0, 100 L100, 0'
    }
  });

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
});

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
  .toggleSize();

[sudo] npm install webpack -g

[sudo] npm install

webpack