Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/juliangarnier/anime/llms.txt

Use this file to discover all available pages before exploring further.

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