juliangarnier / anime
JavaScript animation engine
AI Architecture Analysis
This repository is indexed by RepoMind. By analyzing juliangarnier/anime in our AI interface, you can instantly generate complete architecture diagrams, visualize control flows, and perform automated security audits across the entire codebase.
Our Agentic Context Augmented Generation (Agentic CAG) engine loads full source files into context, avoiding the fragmentation of traditional RAG systems. Ask questions about the architecture, dependencies, or specific features to see it in action.
Embed this Badge
Showcase RepoMind's analysis directly in your repository's README.
Repository Summary (README)
PreviewAnime.js
<p align="center"> <picture align="center"> <source media="(prefers-color-scheme: dark)" srcset="./assets/images/animejs-v4-logo-animation-dark.gif"> <img align="center" alt="Anime.js V4 logo animation" src="./assets/images/animejs-v4-logo-animation.gif" width="560"> </picture> </p> <p align="center"> <strong> <em>Anime.js</em> is a fast, multipurpose and lightweight JavaScript animation library with a simple, yet powerful API.<br> It works with CSS properties, SVG, DOM attributes and JavaScript Objects. </strong> </p> <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>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 <a target="_blank" href="https://github.com/sponsors/juliangarnier">GitHub Sponsors</a>.
Platinum sponsors
<table> <tbody> <tr> <td> <a target="_blank" href="https://ice.io/?ref=animejs"> <picture> <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/ice-open-network-logomark.png?v=200126"> <img align="center" src="./assets/sponsors/ice-open-network-logomark-dark.png?v=200126" width="310"> </picture> </a> </td> <td> <a target="_blank" href="https://hyperswitch.io/?utm_source=julian&utm_medium=github&utm_campaign=animejs_sponsorship"> <picture> <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/juspay-logomark.png?v=200126"> <img align="center" src="./assets/sponsors/juspay-logomark-dark.png?v=200126" width="310"> </picture> </a> </td> <td> <a target="_blank" href="https://github.com/sponsors/juliangarnier"> <picture> <img align="center" src="./assets/sponsors/placeholder-large.png?v=200126" width="310"> </picture> </a> </td> </tr> </tbody> </table>Silver sponsors
<table> <tbody> <tr> <td> <a target="_blank" href="https://www.testmuai.com/?utm_medium=sponsor&utm_source=animejs"> <picture> <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/testmu-ai-logomark.png?v=200126"> <img align="center" src="./assets/sponsors/testmu-ai-logomark-dark.png?v=200126" width="141"> </picture> </a> </td> <td> <a target="_blank" href="https://inspatialapp.com/?ref=animejs"> <picture> <source media="(prefers-color-scheme: dark)" srcset="./assets/sponsors/inspatial-logomark.png?v=200126"> <img align="center" src="./assets/sponsors/inspatial-logomark-dark.png?v=200126" width="141"> </picture> </a> </td> <td> <a target="_blank" href="https://github.com/sponsors/juliangarnier"> <picture> <img align="center" src="./assets/sponsors/placeholder-small.png?v=200126" width="141"> </picture> </a> </td> <td> <a target="_blank" href="https://github.com/sponsors/juliangarnier"> <picture> <img align="center" src="./assets/sponsors/placeholder-small.png?v=200126" width="141"> </picture> </a> </td> <td> <a target="_blank" href="https://github.com/sponsors/juliangarnier"> <picture> <img align="center" src="./assets/sponsors/placeholder-small.png?v=200126" width="141"> </picture> </a> </td> <td> <a target="_blank" href="https://github.com/sponsors/juliangarnier"> <picture> <img align="center" src="./assets/sponsors/placeholder-small.png?v=200126" width="141"> </picture> </a> </td> </tr> </tbody> </table>Get featured here by becoming a <a target="_blank" href="https://github.com/sponsors/juliangarnier">GitHub Sponsor</a>.
Usage
Anime.js V4 works by importing ES modules like so:
<table> <tr> <td>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
});
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 |