anime.js logo v4 Anime.js | JavaScript Animation Engine

Animatable V4

Efficiently animates target properties, making it an ideal replacement for animate() and utils.set() in situations where values change frequently, such as cursor events or animation loops.

Animatables are created using the createAnimatable() function.

import { createAnimatable } from 'animejs';

const animatable = createAnimatable(targets, parameters);

Parameters

Name Accepts
targets Targets
parameters An Object of Animatable settings

Returns

An Animatable instance with animatable property functions used to get and set values:

animatable.propertyName(value, duration, ease); // Triggers an animation
animatable.propertyName(); // Returns the current value

For performance reasons, only Number or Array<Number> can be passed to an animatable property function.

Animatable code example

import { createAnimatable, utils } from 'animejs';

const $demos = document.querySelector('#docs-demos');
const $demo = $demos.querySelector('.docs-demo.is-active');

let bounds = $demo.getBoundingClientRect();
const refreshBounds = () => bounds = $demo.getBoundingClientRect();

const animatableSquare = createAnimatable('.square', {
  x: 500, // Define the x duration to be 500ms
  y: 500, // Define the y duration to be 500ms
  ease: 'out(3)',
});

const onMouseMove = e => {
  const { width, height, left, top } = bounds;
  const hw = width / 2;
  const hh = height / 2;
  const x = utils.clamp(e.clientX - left - hw, -hw, hw);
  const y = utils.clamp(e.clientY - top - hh, -hh, hh);
  animatableSquare.x(x); // Animate the x value in 500ms
  animatableSquare.y(y); // Animate the y value in 500ms
}

window.addEventListener('mousemove', onMouseMove);
$demos.addEventListener('scroll', refreshBounds);
<div class="large centered row">
  <div class="col">
    <div class="square"></div>
  </div>
</div>
<div class="small centered row">
  <span class="label">Move cursor around</span>
</div>
In this section
Previous Next