Unit conversion value

Converts and animates to a value with a different unit than the default or currently used one.

When using the JS animate() method, unit conversions may sometimes produce unexpected results depending on the unit type and animated properties used.
For more predictable results, it's recommended to define the unit outside of the animation using utils.set(), and then animate to the current unit.

Or simply use the WAAPI animate() method.

Accepts

String

Unit conversion value code example

import { animate, utils } from 'animejs';

animate('.square', {
  width: '25%', // from '48px' to '25%',
  x: '15rem', // from '0px' to '15rem',
  rotate: '.75turn', // from `0deg` to '.75turn',
});

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

Previous Next

Numerical value
Relative value