Default units

If no unit is specified for properties that expect a unit, like width for example, the resulting animation will use the default browser unit for a set of commonly used properties:

Syntax comparison

Anime.js

waapi.animate('.circle', {
  x: 100,
  y: 50,
  width: 150,
  height: 80,
});

WAAPI equivalent

const $el = document.querySelector('.circle');

$el.animate({
  translate: '100px 50px',
  width: '150px',
  height: '80px',
}, {
  duration: 1000,
  easing: 'ease-out',
}).finished.then(() => {
  $el.style.translate = '100px';
});

Properties that automatically adds default units

Name Default Unit
x 'px'
y 'px'
z 'px'
translateX 'px'
translateY 'px'
translateZ 'px'
rotate 'deg'
rotateX 'deg'
rotateY 'deg'
rotateZ 'deg'
skew 'deg'
skewX 'deg'
skewY 'deg'
perspective 'px'
width 'px'
height 'px'
margin 'px'
padding 'px'
top 'px'
right 'px'
bottom 'px'
left 'px'
borderWidth 'px'
fontSize 'px'
borderRadius 'px'

Default units code example

import { waapi } from 'animejs';

waapi.animate('.square', {
  opacity: .5,
  x: 250,
  rotate: 45,
  width: 40,
  height: 40,
});
<div class="small row">
  <div class="square"></div>
</div>
<div class="small row">
  <div class="square"></div>
</div>
<div class="small row">
  <div class="square"></div>
</div>
<div class="small row">
  <div class="square"></div>
</div>