CSS transforms
The CSS transform property can be animated by specifying individual properties directly in the parameter object with both JS and WAAPI animate() versions.
This allows a greater level of control over how to animate individual transform properties, giving you more flexibility than CSS animations or native WAAPI.
The JS animate() method doesn't parse transforms declared from a CSS style declaration and transforms properties must be set directly in the inline styles of the element. You can use the built-in utils.set() function to independently set your transform values before animating an element and define in which order they must be set.
In order to animate the transform property directly, it's recommended to use the WAAPI powered waapi.animate() method.
Individual transforms with WAAPI only works for browsers that support CSS.registerProperty(propertyDefinition), and fallback to no animations.
Valid individual CSS transforms properties
| Name | Shorthand | Default Value | Default Unit |
|---|---|---|---|
| translateX | x | '0px' |
'px' |
| translateY | y | '0px' |
'px' |
| translateZ | z | '0px' |
'px' |
| rotate | — | '0deg' |
'deg' |
| rotateX | — | '0deg' |
'deg' |
| rotateY | — | '0deg' |
'deg' |
| rotateZ | — | '0deg' |
'deg' |
| scale | — | '1' |
— |
| scaleX | — | '1' |
— |
| scaleY | — | '1' |
— |
| scaleZ | — | '1' |
— |
| skew | — | '0deg' |
'deg' |
| skewX | — | '0deg' |
'deg' |
| skewY | — | '0deg' |
'deg' |
| perspective | — | '0px' |
'px' |
CSS transforms code example
import { animate, waapi } from 'animejs';
animate('.square', {
x: '15rem', // TranslateX shorthand
scale: 1.25,
skew: -45,
rotate: '1turn',
});
// the WAAPI version is recommanded if you want to animate the transform property directly
waapi.animate('.square', {
transform: 'translateX(15rem) scale(1.25) skew(-45deg) rotate(1turn)',
});<div class="medium row">
<div class="square"></div>
<span class="padded label">JS / WAAPI</span>
</div>
<div class="medium row">
<div class="square"></div>
<span class="padded label">WAAPI</span>
</div>