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.

Accepts

An easing Function
A built-in ease String

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, spring } 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: spring({ 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: spring()<br>rotate: 'inQuad'</div>
</div>

Previous Next