Cubic Bézier easing

A cubic bezier easing defines the pace of an animation using a Bézier curve.

For JavaScript

The cubicBezier() function must be imported for the js animate():

import { animate, cubicBezier } from 'animejs';

animate(target, { x: 100, ease: cubicBezier(0, 0, 0.58, 1) });

For WAAPI

The waapi animate() function uses the browser native cubic bezier timing function and can be specified as a String directly in the ease parameter:

import { waapi } from 'animejs';

waapi.animate(target, { x: 100, ease: 'cubic-bezier(0, 0, 0.58, 1)' });

// Or

waapi.animate(target, { x: 100, ease: 'cubicBezier(0, 0, 0.58, 1)' });

Parameters

The cubic bezier function takes 4 parameters cubicBezier(x1, y1, x2, y2):

Name	Type	Info
x1	`Number`	X coordinate of the first control point. Must be between 0 and 1.
y1	`Number`	Y coordinate of the first control point. Can be any value (negative creates anticipation, >1 creates overshoot).
x2	`Number`	X coordinate of the second control point. Must be between 0 and 1.
y2	`Number`	Y coordinate of the second control point. Can be any value (negative creates anticipation, >1 creates overshoot).

Examples

Name	Editor link
In cubic bezier curve	Open in editor
Out cubic bezier curve	Open in editor
InOut cubic bezier curve	Open in editor
OutIn cubic bezier curve	Open in editor

Cubic Bézier easing code example

import { animate, waapi, cubicBezier } from 'animejs';

animate('.row:nth-child(1) .square', {
  x: '17rem',
  rotate: 360,
  ease: cubicBezier(0.5, 0, 0.9, 0.3)
});

animate('.row:nth-child(2) .square', {
  x: '17rem',
  rotate: 360,
  ease: cubicBezier(0.1, 0.7, 0.5, 1)
});

waapi.animate('.row:nth-child(3) .square', {
  x: '17rem',
  rotate: 360,
  ease: 'cubicBezier(0.7, 0.1, 0.5, 0.9)'
});

<div class="medium row">
  <div class="square"></div>
  <div class="padded label">cubicBezier(0.5, 0, 0.9, 0.3)</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">cubicBezier(0.1, 0.7, 0.5, 1)</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">cubicBezier(0.7, 0.1, 0.5, 0.9)</div>
</div>

Previous Next