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
这是什么?Anime.js 是一个快速、用途广泛且轻量的 JavaScript 动画库,API 简单却功能强大,可以用来制作网页上的各种动画效果。
它是需要引入到我代码里的库,还是一个现成的应用?它是一个库:anime.js V4 是通过在自己的项目中引入它的 ES 模块来使用的,不能单独运行。
我怎么把它加到项目里?安装对应的 npm 包,然后在代码里引入它的模块即可;README 里链接了完整的 V4 文档,包含全部用法的详细讲解。
anime.js 会引入其他依赖库吗?不会——这个包没有任何运行时依赖,安装时不会额外装别的东西。
我用过 anime.js v3,旧代码在 v4 上还能用吗?V4 相比 v3 改动了 API,仓库提供了官方的 v3 到 v4 迁移指南,可以帮你把现有代码迁移过来。
它能做哪些东西的动画?CSS 属性、SVG、DOM 属性以及普通 JavaScript 对象——所以不管是样式、矢量图形,还是任意对象的属性值,都可以做动画。
它能在浏览器之外运行吗,比如 Node 里?它是为浏览器设计的(CSS、SVG、DOM),但仓库会跑 Node 测试套件,也发布 CJS 构建版本,所以在 Node 里给普通对象做动画也是可行的。
它自带 TypeScript 类型吗?有——构建时会在生成 ESM、UMD、CJS 和 IIFE 各个打包版本的同时生成类型声明文件,而且仓库自己的代码和示例都用 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