Skip to main content
Easing functions control the rate of change during an animation, making movements feel more natural and dynamic. Anime.js provides a comprehensive set of easing options to give you precise control over your animation timing.

​
What are Easings?

An easing function takes a linear progression value (0 to 1) and transforms it into a different progression curve. This allows you to create animations that accelerate, decelerate, bounce, or follow custom patterns. 
import anime from 'animejs';

anime({
  targets: '.box',
  translateX: 250,
  easing: 'easeInOutQuad' // Starts slow, speeds up, then slows down
});

​
Easing Categories

Anime.js organizes easings into several categories:

Built-in Easings

Pre-configured easing functions including Quad, Cubic, Sine, Expo, and more

Cubic Bezier

Create custom easing curves using control points

Spring

Physics-based spring animations with natural bouncing motion

Steps

Discrete step-based animations for frame-by-frame effects

Irregular

Randomized easing for organic, unpredictable movement

Custom Functions

Write your own easing functions for complete control

​
Easing Types

Most built-in easings support four timing variations:
  • in: Acceleration from zero velocity (slow start, fast end)
  • out: Deceleration to zero velocity (fast start, slow end)
  • inOut: Acceleration then deceleration (slow start and end, fast middle)
  • outIn: Deceleration then acceleration (fast start and end, slow middle)
// Different timing variations of the same easing
anime({ targets: '.box1', translateX: 250, easing: 'easeInQuad' });
anime({ targets: '.box2', translateX: 250, easing: 'easeOutQuad' });
anime({ targets: '.box3', translateX: 250, easing: 'easeInOutQuad' });
anime({ targets: '.box4', translateX: 250, easing: 'easeOutInQuad' });

​
Linear Easing

The simplest easing is linear, which provides no easing at all - the animation progresses at a constant rate: 
anime({
  targets: '.box',
  translateX: 250,
  easing: 'linear' // Constant speed throughout
});
You can also use 'none' as an alias for linear easing.

​
Parameterized Easings

Some easings accept parameters to customize their behavior: 
// Power easing with custom exponent
import { eases } from 'animejs';

anime({
  targets: '.box',
  translateX: 250,
  easing: eases.in(3) // Cubic power curve
});

// Back easing with custom overshoot
anime({
  targets: '.box',
  translateX: 250,
  easing: eases.outBack(2.5) // More pronounced overshoot
});

​
Using Easing Functions

There are two ways to specify easings in Anime.js:

​
String Syntax (Built-in only)

anime({
  targets: '.box',
  translateX: 250,
  easing: 'easeOutElastic' // String reference
});

​
Function Import (All types)

import { cubicBezier, spring } from 'animejs';

anime({
  targets: '.box',
  translateX: 250,
  easing: cubicBezier(0.42, 0, 0.58, 1) // Function call
});
The old string syntax for cubicBezier(), spring(), steps(), linear(), and irregular() has been removed. You must now import and use these as functions.

​
Next Steps

Explore Built-in Easings

See all available pre-configured easing functions

Try Spring Physics

Create natural, physics-based animations

Build docs developers (and LLMs) love

Get started for freeTalk to us