dat.gui.ease.gsap.v2

Allows to edit GSAP v2.x easings in dat.GUI

Usage no npm install needed!

<script type="module">
  import datGuiEaseGsapV2 from 'https://cdn.skypack.dev/dat.gui.ease.gsap.v2';
</script>

README

npm license npm peer dependency version npm peer dependency version

dat.GUI.Ease.GSAP.v2

Provides support for GSAP easings. CustomEase plugin can be provided to enable CustomEase processing and ease editing.

Example usage:

import * as dat from 'dat.gui';
import { extend } from 'dat.gui.ease';
import GSAPv2Middleware from 'dat.gui.ease.gsap.v2';
import { Power1 } from "gsap/TweenMax";

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

const gui = new dat.GUI();
const config = {
     ease: Power1.easeOut
     customEase: CustomEase.create("custom", "M 0,0 C 0.1,0.4 0.1,0.4 0.5,0.5 0.9,0.6 0.9,0.6 1,1")
};

gui.addEase(config, "ease");
gui.addEase(config, "customEase");

Installation

npm install --save gsap@^2.0.0
npm install --save-dev dat.gui dat.gui.ease dat.gui.ease.gsap.v2

Use in the project

  1. File include:
<script type="text/javascript" src="https://unpkg.com/dat.gui.ease.gsap.v2@latest/dist/dat.gui.ease.gsap.v2.min.js"></script>
<script>
     const middleware = new datGuiEaseGsapV2.Middleware();
</script>
  1. ES6 module
import GSAPv2Middleware from 'dat.gui.ease.gsap.v2';
// or
import { Middleware as GSAPv2Middleware } from 'dat.gui.ease.gsap.v2';

const middleware = new GSAPv2Middleware();
  1. CommonJS
const datGuiEaseGsapV2 = require('dat.gui.ease.gsap.v2');

const middleware = new datGuiEaseGsapV2.Middleware();