Cubic Bezier

Create custom cubic bezier easing curves in Anime.js

The cubicBezier() function allows you to create custom easing curves using cubic bezier control points. It’s adapted from Gaëtan Renaudeau’s bezier-easing.

Basic Usage

import { cubicBezier } from 'animejs';

animate({
  targets: '.element',
  translateX: 250,
  ease: cubicBezier(0.42, 0, 0.58, 1)
});

Parameters

mX1 · number · default: "0.5"

The x coordinate of the first control point. Defines the horizontal position of the first bezier handle.

mY1 · number · default: "0"

The y coordinate of the first control point. Defines the vertical position of the first bezier handle.

mX2 · number · default: "0.5"

The x coordinate of the second control point. Defines the horizontal position of the second bezier handle.

mY2 · number · default: "1"

The y coordinate of the second control point. Defines the vertical position of the second bezier handle.

Common Presets

Ease

import { cubicBezier } from 'animejs';

animate({
  targets: '.element',
  translateX: 250,
  ease: cubicBezier(0.25, 0.1, 0.25, 1)
});

Ease In

import { cubicBezier } from 'animejs';

animate({
  targets: '.element',
  translateX: 250,
  ease: cubicBezier(0.42, 0, 1, 1)
});

Ease Out

import { cubicBezier } from 'animejs';

animate({
  targets: '.element',
  translateX: 250,
  ease: cubicBezier(0, 0, 0.58, 1)
});

Ease In Out

import { cubicBezier } from 'animejs';

animate({
  targets: '.element',
  translateX: 250,
  ease: cubicBezier(0.42, 0, 0.58, 1)
});

Custom Curves

Anticipation

Creates an animation that pulls back slightly before moving forward:

import { cubicBezier } from 'animejs';

animate({
  targets: '.element',
  translateX: 250,
  ease: cubicBezier(0.68, -0.55, 0.265, 1.55)
});

Fast Start, Slow End

import { cubicBezier } from 'animejs';

animate({
  targets: '.element',
  translateX: 250,
  ease: cubicBezier(0.7, 0, 0.84, 0)
});

Slow Start, Fast End

import { cubicBezier } from 'animejs';

animate({
  targets: '.element',
  translateX: 250,
  ease: cubicBezier(0.16, 1, 0.3, 1)
});

Understanding Cubic Bezier

A cubic bezier curve is defined by four points:

1. Start point: (0, 0) - always fixed
2. First control point: (mX1, mY1) - controls the curve at the start
3. Second control point: (mX2, mY2) - controls the curve at the end
4. End point: (1, 1) - always fixed

The x-axis represents time (0 to 1), and the y-axis represents the progression of the animation (0 to 1).

Tips

• X coordinates control the timing distribution
• Y coordinates control the value progression
• Y values can go below 0 or above 1 to create overshoot effects
• When mX1 === mY1 and mX2 === mY2, the function returns a linear easing

Creating Bezier Curves

You can use online tools to visualize and create cubic bezier curves:

• cubic-bezier.com
• Chrome DevTools Animation Inspector

Algorithm Details

The implementation uses:

• Binary subdivision for high precision curve calculation
• Iteration continues until precision reaches 0.0000001 or 100 iterations
• Optimized for performance with minimal calculations

Reusable Curves

import { cubicBezier } from 'animejs';

// Create reusable easing curves
const smoothEase = cubicBezier(0.4, 0, 0.2, 1);
const snappyEase = cubicBezier(0.8, 0, 0.2, 1);
const elasticEase = cubicBezier(0.68, -0.55, 0.265, 1.55);

// Use in multiple animations
animate({
  targets: '.element1',
  translateX: 250,
  ease: smoothEase
});

animate({
  targets: '.element2',
  scale: 2,
  ease: snappyEase
});

animate({
  targets: '.element3',
  rotate: 360,
  ease: elasticEase
});

Performance

The cubic bezier function is highly optimized:

• Uses binary subdivision for accurate interpolation
• Caches calculation results for t === 0 and t === 1
• Returns the linear function directly when control points form a straight line

See Also

• Easing Functions - Built-in easing presets
• Spring Easing - Physics-based spring animations