Animation

Animates the properties values of targeted elements, with a wide range of parameters, callbacks and methods.

Animations are created using the animate() method.

import { animate } from 'animejs';

const animation = animate(targets, parameters);

Parameters

Name	Accepts
targets	Targets
parameters	An `Object` of Animatable properties, Tween parameters, Playback settings and Animation callbacks

Returns

JSAnimation

WAAPI powered animations

Anime.js provides a more lightweight (3KB) version of the animate() method (10KB) powered by the Web Animation API.

import { waapi } from 'animejs';

const animation = waapi.animate(targets, parameters);

The WAAPI version has less features overall, but covers most of the basic API.

To know more about when to use the WAAPI version and its potential pitfalls, please refer to the Web Animations API Guide.

Features only available in the JavaScript version are indicated with a (JS) badge and WAAPI specific features are indicated with a (WAAPI) badge

Animation code example

import { animate, stagger, text } from 'animejs';

const { chars } = text.split('h2', { words: false, chars: true });

animate(chars, {
  // Property keyframes
  y: [
    { to: '-2.75rem', ease: 'outExpo', duration: 600 },
    { to: 0, ease: 'outBounce', duration: 800, delay: 100 }
  ],
  // Property specific parameters
  rotate: {
    from: '-1turn',
    delay: 0
  },
  delay: stagger(50),
  ease: 'inOutCirc',
  loopDelay: 1000,
  loop: true
});

<div class="large grid centered square-grid">
  <h2 class="text-xl">HELLO WORLD</h2>
</div>

#animation .text-xl {
  font-size: 1.5rem;
  color: currentColor;
  letter-spacing: 0.06em;
}

In this section

Previous Next