Anime.js online editor

Write, Run & Share Anime.js code online using OneCompiler's Anime.js online editor for free. It's one of the robust, feature-rich online editors for Anime.js. Getting started with the OneCompiler's Anime.js online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Anime.js' and start writing code to learn and test online without worrying about tedious process of installation.

About Anime.js

Anime.js is a lightweight animation library. You hand it a target (a CSS selector, a DOM node, or a plain object) and the properties you want to animate, and it tweens them over time. It animates CSS transforms, SVG, and JavaScript object values with the same API.

Syntax help

Setup

Load Anime.js from a CDN. It exposes a global anime function.

<div class="box"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js"></script>

Basic animation

Call anime with a target and the properties to animate. Set the duration, easing, and whether it loops.

anime({
  targets: '.box',
  translateX: 240,
  rotate: '1turn',
  backgroundColor: '#5c6ac4',
  duration: 1600,
  easing: 'easeInOutQuad',
  loop: true,
  direction: 'alternate',
});

Keyframes

Pass an array of values for a property to move through several steps in sequence.

anime({
  targets: '.box',
  translateX: [
    { value: 120, duration: 600 },
    { value: 0, duration: 600 },
  ],
  easing: 'easeInOutSine',
});

Stagger

anime.stagger spreads a delay across multiple targets so they animate one after another.

anime({
  targets: '.box',
  translateY: -40,
  delay: anime.stagger(100),
});

Timelines

A timeline chains animations. Each add runs after the previous one unless you give it an offset.

const tl = anime.timeline({ easing: 'easeOutExpo', duration: 750 });
tl.add({ targets: '.a', translateX: 250 })
  .add({ targets: '.b', translateX: 250 })
  .add({ targets: '.c', translateX: 250 });

Controls

anime returns an instance you can drive manually.

const animation = anime({
  targets: '.box',
  translateX: 250,
  autoplay: false,
});

animation.play();
animation.pause();
animation.restart();