dat.GUI.Ease

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

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><!-- adds 'datGuiEase' global variable -->
<link rel="stylesheet" type="text/css" href="https://unpkg.com/dat.gui.ease@latest/dist/dat.gui.ease.css">

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

2. ES6 module

import * as dat from 'dat.gui';
import datGuiEase from 'dat.gui.ease';
import '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();
const config = { ease: {} };

gui.addEase(config, "ease"); // Shows warning "No compatible middleware found"

To enable processing of ease objects, a Middleware object should be provided within the use() method:

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

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

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

gui.addEase(config, "ease"); // Voila! Ease is editable in dat.GUI

You can either configure your own Middleware with Middleware API, or use one of preconfigured ones for animation library you're using:

Library	Package	Middleware
anime.js	dat.gui.ease.animejs	AnimeJSMiddleware
GSAP	dat.gui.ease.gsap.v2    dat.gui.ease.gsap.v3	GSAPv2Middleware GSAPv3Middleware
velocity.js	dat.gui.ease.velocityjs	VelocityJSMiddleware
tween.js	dat.gui.ease.tweenjs	TweenJSMiddleware

Credits

SidneyDouw/curvesjs - minimalistic yet nonetheless powerful bezier curve editor with no dependencies.

Pomax/bezierjs - a powerful bezier curve computation library.

Jeremboo/dat.gui.image - another custom control for dat.GUI, an inspiration for this package.