ease

Defines the easing function for all animated properties or a specific property.
Easing functions control the rate of change of a property value over time, determining the animation's speed at different points during playback.

All Anime.js built-in easing functions can either be used by passing the easing name String or the function accessible on the eases object.

import { eases } from 'animejs';

const { linear, outExpo, cubicBezier } = eases;

The createSpring() easing function must be imported separately.

import { createSpring } from 'animejs';

Accepts

Built-in string	Function	Parameters
`'linear'` `'linear(0, .5 75%, 1)'`	`linear()`	coords (`0, '.5 75%', 1`)
`'irregular'` JS `'irregular(10, 1)'` JS	`irregular()`	length = `10`, randomness = `1`
`'steps'` `'steps(10)'`	`steps()`	steps = `10`
`'cubicBezier'` `'cubicBezier(.5,0,.5,1)'`	`cubicBezier()`	x1 = `.5`, y1 = `0`, x2 = `.5`, y2 = `1`
`'in'` `'in(1.675)'`	`in()`	power = `1.675`
`'out'` `'out(1.675)'`	`out()`	power = `1.675`
`'inOut'` `'inOut(1.675)'`	`inOut()`	power = `1.675`
`'inQuad'` JS	`inQuad`	-
`'outQuad'` JS	`outQuad`	-
`'inOutQuad'` JS	`inOutQuad`	-
`'inCubic'` JS	`inCubic`	-
`'outCubic'` JS	`outCubic`	-
`'inOutCubic'` JS	`inOutCubic`	-
`'inQuart'` JS	`inQuart`	-
`'outQuart'` JS	`outQuart`	-
`'inOutQuart'` JS	`inOutQuart`	-
`'inQuint'` JS	`inQuint`	-
`'outQuint'` JS	`outQuint`	-
`'inOutQuint'` JS	`inOutQuint`	-
`'inSine'` JS	`inSine`	-
`'outSine'` JS	`outSine`	-
`'inOutSine'` JS	`inOutSine`	-
`'inCirc'` JS	`inCirc`	-
`'outCirc'` JS	`outCirc`	-
`'inOutCirc'` JS	`inOutCirc`	-
`'inExpo'` JS	`inExpo`	-
`'outExpo'` JS	`outExpo`	-
`'inOutExpo'` JS	`inOutExpo`	-
`'inBounce'` JS	`inBounce`	-
`'outBounce'` JS	`outBounce`	-
`'inOutBounce'` JS	`inOutBounce`	-
`'inBack'` JS `'inBack(1.70158) '` JS	`inBack()`	overshoot = `1.70158`
`'outBack'` JS `'outBack(1.70158) '` JS	`outBack()`	overshoot = `1.70158`
`'inOutBack'` JS `'inOutBack(1.70158) '` JS	`inOutBack()`	overshoot = `1.70158`
`'inElastic'` JS `'inElastic(1, .3) '` JS	`inElastic()`	amplitude = `1`, period = `.3`
`'outElastic'` JS `'outElastic(1, .3) '` JS	`outElastic()`	amplitude = `1`, period = `.3`
`'inOutElastic'` JS `'inOutElastic(1, .3) '` JS	`inOutElastic()`	amplitude = `1`, period = `.3`
-	`createSpring()`	`{ mass: 1, stiffness: 100, damping: 10, velocity: 0 }`

Default

'out(2)'

To change the default value globally, update the engine.defaults object.

import { engine } from 'animejs';
engine.defaults.ease = 'outElastic(1, .5)'; // // v3 throwback :)

ease code example

import { animate, waapi, eases, createSpring } from 'animejs';

animate('.row:nth-child(1) .square', {
  x: '17rem',
  rotate: 360,
  ease: 'inQuad',
});

animate('.row:nth-child(2) .square', {
  x: '17rem',
  rotate: 360,
  ease: eases.outQuad,
});

waapi.animate('.row:nth-child(3) .square', {
  x: '17rem',
  rotate: {
    to: 360,
    ease: 'out(6)',
  },
  ease: createSpring({ stiffness: 70 }),
});

<div class="medium row">
  <div class="square"></div>
  <div class="padded label">all: 'inQuad'</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">all: eases.outQuad</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">x: createSpring()<br>rotate: 'inQuad'</div>
</div>

Previous Next