Skip to main content

CustomEase

Quick Start

CDN Link

gsap.registerPlugin(CustomEase) 

Minimal usage

CustomEase.create(
"hop",
"M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0"
);

//now you can reference the ease by ID (as a string):
gsap.to(element, { duration: 1, y: -100, ease: "hop" });

Description

CustomEase frees you from the limitations of canned easing options; create literally any easing curve imaginable by simply drawing it in the Ease Visualizer or by copying/pasting an SVG path. Zero limitations. Use as many control points as you want.

Ease Visualizer

value: 0.00
progress: 0.00
  • Add point: ALT-CLICK on line
  • Toggle smooth/corner: ALT-CLICK anchor
  • Get handle from corner anchor: ALT-DRAG
  • Toggle select: SHIFT-CLICK anchor
  • Delete anchor: press DELETE key
  • Undo: CTRL-Z

Core

none

Extra

Club GSAP

// click to modify the underlined values
gsap.to(target, {
duration:,
ease: ".",none",({
template:.none,
strength: ,
points:,
taper:,
randomize:,
clamp:
})",
(,,)",(,)",()",(,)",()",create("custom", ""0""),create("myWiggle", {
wiggles:,
type:
}),
create("myBounce", {
strength:,
endAtStart:,
squash:,
squashID: "myBounce-squash"
}),
y: -500
rotation: 360
x: "400%"
});
Creating a Custom Ease

How to use this ease visualizer

  • Add points - ATL/OPTION-click anywhere on the curve
  • Delete points - Select the point and then press the DELETE key on the keyboard
  • Toggle smooth/corner - ALT/OPTION-click on an anchor point. Or, ALT/OPTION-drag a control handle to turn it into a corner (not smooth) point.
  • Select multiple points - Hold the SHIFT key while clicking anchor points.
  • Undo - Press CTRL-Z
  • Disable snapping - Hold SHIFT while dragging

You can edit any of the other eases by selecting them and then hiting "CustomEase".

Copy/Paste SVG

When in the "custom" mode of the Ease Visualizer, you can select the purple text at the bottom (the CustomEase data string), highlight it all, and then paste in an SVG path (like from Adobe Illustrator) and then click elsewhere and the Ease Visualizer will grab the first <path> and convert it into the proper format.

Using cubic-bezier values

CustomEase also recognizes standard cubic-bezier() strings containing four numbers, like those you can get from cubic-bezier.com. For example, ".17,.67,.83,.67". Either paste that into the orange text area in the bottom of the Ease Visualizer or feed it directly into the CustomEase.create() method, like CustomEase.create("easeName", ".17,.67,.83,.67");.

The code

Instead of using the long data string in each tween, you simply create() a CustomEase once (typically as soon as your page/app loads) and assign it a memorable ID (like "hop" or "wiggle" or whatever you want) that you reference thereafter in any of your tweens, like:

//define your CustomEase and give it an ID ("hop" in this case)

CustomEase.create(
"hop",
"M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0"
);

//now you can reference the ease by ID (as a string):
gsap.to(element, { duration: 1, y: -100, ease: "hop" });

Creating the ease(s) initially ensures maximum performance during animation because there's some overhead involved in calculating all the points internally and optimizing the data for blisteringly fast runtime performance. That only happens once, upon creation.

Typically the path string uses normalized values (0-1), but you can pass in any SVG path data that uses cubic bezier instructions ("M", "C", "S", "L", or "Z" commands) and it'll normalize things internally.

.getSVGData()

CustomEase has a getSVGData() method that calculates the SVG <path> data string for visualizing any ease graphically at any size that you define, like {width: 500, height: 400, x: 10, y: 50}. You can supply a CustomEase or the ID associated with one, or even a standard ease like "power2". Feed in a path in the vars object and it'll populate its d attribute for you, like:

//create a CustomEase with an ID of "hop"
CustomEase.create(
"hop",
"M0,0 C0,0 0.056,0.445 0.175,0.445 0.294,0.445 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0"
);

//draw the ease visually in the SVG that has an ID of "ease" at 500px by 400px:
CustomEase.getSVGData("hop", { width: 500, height: 400, path: "#ease" });

Naming caveat

It's usually not a good idea to name your ease (the string name you associate with it) the same as one of the standard eases, like "expo" or "power1", etc. because that would essentially overwrite that standard ease and replace it with your CustomEase.

Demos

Videos

Overview
Using CustomEase in a project

FAQ

How do I include CustomEase in my project?

See the installation page for all the options (CDN, NPM, download, etc.) where there's even an interactive helper that provides the necessary code. Easy peasy. Don't forget to register CustomEase like this in your project:

gsap.registerPlugin(CustomEase);

Is this included in the GSAP core?

No, you must load/import it separately

Is this only for Club GSAP members?

No, it's available to everyone for free! But Club GSAP is pretty awesome...just sayin'.

It works fine during development, but suddenly stops working in the production build! What do I do?

Your build tool is probably dropping the plugin when tree shaking and you forgot to register CustomEase (which protects it from tree shaking). Just register the plugin like this:

gsap.registerPlugin(CustomEase);

Is it bad to register a plugin multiple times?

No, it's perfectly fine. It doesn't help anything, nor does it hurt.