Package Exports

dat.gui.ease
dat.gui.ease/dist/dat.gui.ease.min.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (dat.gui.ease) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

license

dat.GUI.Ease

An extension of dat.GUI to edit animation easings in real time.

Extension preview

Installation

npm install --save-dev dat.gui dat.gui.ease

Include to the project

File include:

<script  type="'text/javascript" src="https://unpkg.com/dat.gui@^0.7.7/build/dat.gui.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/dat.gui.ease@latest/dist/dat.gui.ease.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/dat.gui.ease@latest/dist/dat.gui.ease.css">

<script>
     const { datGuiEase } = window;
</script>

ES6 module

import * as dat from 'dat.gui';
import datGuiEase from 'dat.gui.ease';
import styles from 'dat.gui.ease/dist/dat.gui.ease.css';

CommonJS

const dat = require('dat.gui');
const datGuiEase = require('dat.gui.ease');
const styles = require('dat.gui.ease/dist/dat.gui.ease.css');

Set up middlewares

Middleware object is used to process ease values inside dat.GUI inspected object. You'll need to create and configure one to make your easing objects processable:

import dat from "dat.gui";
import datGuiEase, { middleware, presets } from "dat.gui.ease";

datGuiEase.extend(dat).use(
     middleware("MyAnimationLib")
          .preset("linear", presets.Linear)
          .preset("sine.in", presets.SineIn)
          .preset("sine.out", presets.SineOut)
          .preset("sine.inOut", presets.SineInOut)
          .preset("quad.in", presets.QuadIn)
          .preset("quad.out", preset.QuadOut)
          .preset("quad.inOut", preset.QuadInOut)
);

const gui = new dat.GUI();
const config = { ease: "linear" };

gui.add(config, "ease"); // Voila! "ease" property is editable in dat.GUI as ease object

For more customization options, see the API reference below.

Middleware API

new Middleware([name]) ⇒ `Middleware`

Param	Type	Description
[name]	`String`	Identification name for middleware. Purely descriptive.

import datGuiEase, { Middleware, middleware } from "dat.gui.ease";

const myMiddleware = new Middleware("MyAnimationLib");
// Or static method, whatever you prefer
const myMiddleware = middleware("MyAnimationLib");

Middleware.prototype.preset(easeInstance, middlewarePresetInstance) => `Middleware`

Registers ease object as one of selectable options in dat.GUI ease control. If inspected value equals ease object, a dat.GUI ease control will be created for it.

Param	Type	Description
easeInstance	`Object` \| `String`	Instance of an object representing your ease
middlewarePresetInstance	`EasePreset`	Middleware ease preset instance. Used to map your instance to middleware-supported ease and to generate GUI selection option in provided categories. You can either declare your own, or use one of `presets` for most common easings.

import datGuiEase, { middleware, presets } from "dat.gui.ease";
const {
     Linear,
     SineIn, SineOut, SineInOut,
     QuadIn, QuadOut, QuadInOut,
     CubicIn, CubicOut, CubicInOut,
     QuartIn, QuartOut, QuartInOut,
     ExpoIn, ExpoOut, ExpoInOut,
     CircIn, CircOut, CircInOut,
     BackIn, BackOut, BackInOut
} = presets;

middleware("MyAnimationLib")
     .preset("sine.out", SineOut),
     .preset("aliasSine.out", SineOut.withAlias("AliasSine")),
     .preset("customSine.out", EasePreset.of("M 0,0 C 0.61,1 0.88,1 1,1", "CustomSine", "out"));

Middleware.prototype.pick(predicateFn).transform(outInTransformationFn, inOutTransformationFn) ⇒ `Middleware`

Enables GUI editing mode if inspected value fits predicateFn.

Param	Type	Description
predicateFn	`Function`<`Object` \| `String`> : `Boolean`	Predicate function checking whether inspected value is valid for transformation in edit mode
outInTransformationFn	`Function`<`Object` \| `String`> : `Ease`	Function transforming inspected value to middleware-supported `Ease` format
inOutTransformationFn	`Function`<`Ease`> : `Object` \| `String`	Function transforming middleware-supported `Ease` instance back to the original format of inspected value

import datGuiEase, { middleware } from "dat.gui.ease";

class MyEase {
     constructor(svgPath) {
          this.svgPath = svgPath;
     };
}

middleware("MyAnimationLib")
     .pick(datObject => datObject instanceof MyEase).transform(
          datEase => Ease.ofSVGPath(datEase.svgPath),
          middlewareEase => new MyEase(middlewareEase.svgPath));

dat.gui.ease