Spring and custom easings

Uses any spring and custom JavaScript easing function.

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

import { eases } from 'animejs';

const { linear, outExpo, cubicBezier } = eases;

The spring() easing function must be imported separately.

import { spring } from 'animejs';

Built-in eases

Built-in string	Function	Parameters
`'linear'` `'linear(0, .5 75%, 1)'`	`linear()`	coords (`0, '.5 75%', 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`

Default

'out(2)'

Spring and custom easings code example

import { waapi, utils, stagger, spring } from 'animejs';

waapi.animate('.circle', {
  y: [0, -30, 0],
  ease: spring({ stiffness: 150, damping: 5 }),
  delay: stagger(75),
  loop: true,
});

<div class="large row">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</div>

Previous Next