waapi.convertEase()

Converts any JavaScript easing functions into a compatible WAAPI linear easing.

import { waapi, createSpring } from 'animejs';

const spring = createSpring({ stiffness: 12 });

const linearEasing = waapi.convertEase(spring.ease);

waapi.convertEase() code example

import { waapi, createSpring } from 'animejs';

const springs = [
  createSpring({ stiffness: 100 }),
  createSpring({ stiffness: 150 }),
  createSpring({ stiffness: 200 })
]

document.querySelectorAll('#web-animation-api-waapi-convertease .demo .square').forEach(($el, i) => {
  $el.animate({
    translate: '17rem',
    rotate: '1turn',
  }, {
    easing: waapi.convertEase(springs[i].ease),
    delay: i * 250,
    duration: springs[i].duration,
    fill: 'forwards'
  });
});

<div class="medium row">
  <div class="square"></div>
  <div class="padded label">stiffness: 100</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">stiffness: 150</div>
</div>
<div class="medium row">
  <div class="square"></div>
  <div class="padded label">stiffness: 200</div>
</div>

Previous Next