anime README

The project's README from github.com/juliangarnier/anime. As one markdown file: README.md.

Anime.js

Anime.js V4 logo animation

Anime.js is a fast, multipurpose and lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

NPM Downloads jsDelivr hits (npm) GitHub Sponsors

Sponsors

Anime.js is 100% free and is only made possible with the help of our sponsors. Help the project become sustainable by sponsoring us on GitHub Sponsors.

Platinum sponsors

Silver sponsors

Get featured here by becoming a GitHub Sponsor.

Usage

Anime.js V4 works by importing ES modules like so:

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

animate('.square', {
  x: 320,
  rotate: { from: -180 },
  duration: 1250,
  delay: stagger(65, { from: 'center' }),
  ease: 'inOutQuint',
  loop: true,
  alternate: true
});
Anime.js code example

V4 Documentation

The full documentation is available here.

V3 Migration guide

You can find the v3 to v4 migration guide here.

NPM development scripts

First, run npm i to install all the necessary packages. Then, execute the following scripts with npm run <script>.

script action
dev Watches for changes in src/**/*.js, bundles the ESM version to lib/ and creates type declarations in types/
dev:test Runs dev and test:browser concurrently
build Bundles ESM / UMD / CJS / IIFE versions to lib/ and creates type declarations in types/
test:browser Starts a local server and runs all browser-related tests
test:node Starts Node-related tests
open:examples Starts a local server to browse the examples locally

© Julian Garnier | MIT License

anime (juliangarnier/anime)

Searching Database…

73.7K ·GitHub
What is this?Anime.js is a fast, multipurpose and lightweight JavaScript animation library with a simple yet powerful API for animating things on the web.
Is it a library I import into my code, or a ready-made app?It is a library: anime.js V4 is consumed by importing its ES modules into your own project, not something you run on its own.
How do I add it to a project?Install the npm package and import its modules in your code; the README links to the full V4 documentation covering the complete usage walkthrough.
Does anime.js pull in any other libraries?No — the package ships zero runtime dependencies, so nothing else gets installed alongside it.
I used anime.js v3 — will my old code still work on v4?V4 changed the API from v3, and the repo ships an official v3 to v4 migration guide for porting existing code.
What can it animate?CSS properties, SVG, DOM attributes and plain JavaScript objects — so styles, vector graphics and even arbitrary object values can be animated.
Can it run outside the browser, say in Node?It is built for the browser (CSS, SVG, DOM), but the repo runs a Node test suite and publishes CJS builds, so animating plain objects also works in Node.
Does it come with TypeScript types?Yes — the build generates type declarations alongside the ESM, UMD, CJS and IIFE bundles, and the repo typechecks its own code and examples with tsc.
What are similar projects?GSAP, jquery, vivus, svg.js, velocity, popmotion, snabbdom, pretext
Size
180.7 MB
Stars
73.7K
Age
10y
Commits · 90 Days