dat.GUI.Ease

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

Include middlewares to support animation libraries of your choice:

Library	Middleware
GSAP	GSAPv2Middleware    GSAPv3Middleware
anime.js	in progress
tween.js	pending

Installation

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

Include to the project

1. 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">

2. 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';

3. 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 the extension

datGuiEase.extend(dat);

const gui = new dat.GUI();
gui.addEase({ ease: {} }, "ease"); // Shows warning "No compatible middleware found"

To support ease objects of animation library of your choice, a corresponding middleware(from the list on top) should be included to the project and registered via use() method:

import { Power2 } from "gsap";
import GSAPv2Middleware from "dat.gui.ease.gsap.v2";

datGuiEase.extend(dat).use(
     new GSAPv2Middleware()
);

const gui = new dat.GUI();
gui.addEase({ ease: Power2.easeIn }, "ease"); // Voila! Ease is editable in dat.GUI

Common issue

Missing styles (es6)

// build tools with treeshaking might ignore the following statement
import styles from 'dat.gui.ease/dist/dat.gui.ease.css';

// use this instead
import 'dat.gui.ease/dist/dat.gui.ease.css'

Credits

SidneyDouw/curvesjs - minimalistic yet nonetheless powerful bezier curve editor with no dependencies - exactly what I've looked for. Hope it gets more attention.

Jeremboo/dat.gui.image - gave me an idea of custom control for dat.GUI.