Individual CSS transforms

Unlike CSS animations or native WAAPI, the CSS transform property can be animated by specifying individual properties.
This allows a greater level of control over how to animate individual transform properties.

Individual transforms with WAAPI only works for browsers that support CSS.registerProperty(propertyDefinition), and fallback to no animations.

Individual transforms cannot be hardware-accelerated.

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'`

Individual CSS transforms code example

import { waapi, utils } from 'animejs';

const $squares = utils.$('.square');

const animateSquares = () => {
  waapi.animate($squares, {
    x: () => utils.random(0, 17) + 'rem',
    y: () => utils.random(-1, 1) + 'rem',
    rotateX: () => utils.random(-90, 90),
    rotateY: () => utils.random(-90, 90),
    onComplete: () => animateSquares()
  });
}

animateSquares();

<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>

Previous Next