Awesome

[!IMPORTANT]

🎉 Anime.js V4 is now available in early access 🎉

After years in the making, Anime.js V4 is finally available in early access for my GitHub Sponsors!

<h1 align="center"> <a href="https://animejs.com"><img src="/documentation/assets/img/animejs-v3-header-animation.gif" width="250"/></a> <br> anime.js </h1> <h4 align="center">JavaScript animation engine | <a href="https://animejs.com" target="_blank">animejs.com</a></h4> <p align="center"> <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/animejs?style=flat-square&logo=npm"> <img alt="jsDelivr hits (npm)" src="https://img.shields.io/jsdelivr/npm/hm/animejs?style=flat-square&logo=jsdeliver"> <img alt="GitHub Sponsors" src="https://img.shields.io/github/sponsors/juliangarnier?style=flat-square&logo=github"> </p> <blockquote align="center"> <em>Anime.js</em> (<code>/ˈæn.ə.meɪ/</code>) is a lightweight JavaScript animation library with a simple, yet powerful API.<br> It works with CSS properties, SVG, DOM attributes and JavaScript Objects. </blockquote> <p align="center"> <a href="#getting-started">Getting started</a> | <a href="#documentation">Documentation</a> | <a href="#demos-and-examples">Demos and examples</a> | <a href="#browser-support">Browser support</a> </p>

Powered by

<table> <tr> <td> <a target="_blank" href="https://huly.io?ref=animejs"> <picture> <source media="(prefers-color-scheme: dark)" srcset="./documentation/assets/sponsors/huly-logomark.svg"> <img align="center" src="./documentation/assets/sponsors/huly-logomark-dark.svg" width="128"> </picture> </a> </td> <td> <a target="_blank" href="https://clutch.io?ref=animejs"> <picture> <source media="(prefers-color-scheme: dark)" srcset="./documentation/assets/sponsors/clutch-logomark.svg"> <img align="center" src="./documentation/assets/sponsors/clutch-logomark-dark.svg" width="128"> </picture> </a> </td> <td> <a target="_blank" href="https://github.com/sponsors/juliangarnier"> <picture> <source media="(prefers-color-scheme: dark)" srcset="./documentation/assets/sponsors/placeholder.svg"> <img align="center" src="./documentation/assets/sponsors/placeholder-dark.svg" width="128"> </picture> </a> </td> </tr> <tr> <td align="center"> <a target="_blank" href="https://huly.io?ref=animejs">Huly</a> </td> <td align="center"> <a target="_blank" href="https://clutch.io?ref=animejs">Clutch</a> </td> <td align="center"> <a target="_blank" href="https://github.com/sponsors/juliangarnier">Your logo here</a> </td> </tr> </table>

Getting started

Download

Via npm

$ npm install animejs --save

or manual download.

Usage

ES6 modules

import anime from 'animejs/lib/anime.es.js';

CommonJS

const anime = require('animejs');

File include

Link anime.min.js in your HTML :

<script src="anime.min.js"></script>

Hello world

anime({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});

Documentation

Demos and examples

Browser support

Chrome	Safari	IE / Edge	Firefox	Opera
24+	8+	11+	32+	15+