Numerical value

Specifies the numerical value of the animated property by passing either a Number or a String containing at least one Number.

If no unit is specified for properties that expect a unit, like width for example, the resulting animation will use the default browser unit.

animate(target, { width: 100 }); // Defaults to px

Accepts

Number
String

If a specific unit is already specified, the JS animate() method can inherits previously defined units and the next value set without a unit on the same target property inherits the previously defined unit.

animate(target, { width: '50%' }); // Uses '%'
animate(target, { width: 75 });    // Inherits '%' -> '75%'

The WAAPI animate() method only falls back automatically to 'px' with the following properties:

- x / translateX
- y / translateY
- z / translateZ
- perspective
- top
- right
- bottom
- left
- width
- height
- margin
- padding
- borderWidth
- borderRadius
- fontSize

Numerical value code example

import { waapi } from 'animejs';

waapi.animate('.square', {
  x: 240, //  -> 240px
  width: 75, // -> 75px
  rotate: '.75turn',
});

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

Previous Next