anime Documentation

| --- | --- |



## V4 Documentation

The full documentation is available [here](https://animejs.com/documentation).

## V3 Migration guide

You can find the v3 to v4 migration guide [here](https://github.com/juliangarnier/anime/wiki/Migrating-from-v3-to-v4).

## 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](http://juliangarnier.com) | [MIT License](LICENSE.md)

---

## File: CONTRIBUTING.md

# Contributing

> [!CAUTION]
> Issues and PRs created without following the guidelines listed below **will be closed** until they match the expected template.

## Bug report
Open a [bug report issue](https://github.com/juliangarnier/anime/issues/new?template=bug_report.md) by following the bug report template and attaching the "bug" label.

## New features proposal
Open a [feature proposal issue](https://github.com/juliangarnier/anime/issues/new?template=feature_request.md) by following the feature proposal template and attaching the "feature proposal" label.

## Question
If you have a question not related to a bug or a new feature, do not create an issue, but start a [Q&A discussion](https://github.com/juliangarnier/anime/discussions/new?category=q-a) instead.

## Documentation update
Open a [documentation update issue](https://github.com/juliangarnier/anime/issues/new?template=documentation-update.md) by following the documentation update template and attaching the "documentation" label.

## Development
Anime.js is written in JavaScript and the type definitions are generated from [JSDoc](https://jsdoc.app/) annotations.

JSDoc types used globally in the project are defined in the `src/types.js` file. Otherwise, JSDoc types should be defined directly in their corresponding file.

Before opening a PR, follow these steps to properly build and test the project:

1. Make sure your PR has a bug report or new feature proposal issue associated with it. If not, create one.
2. Clone your fork to your computer.
3. Install the NPM dependencies with `npm i`.
4. Modify or add `.js` files in `/src`, with valid JSDoc annotations.
5. Run `npm run dev-types` to build the `anime.esm.js` and `index.d.ts` files by watching changes in `/src`.
6. Add the necessary tests to the relevant file in `/test/suites/`.
7. Run `npm run test-browser` to make sure you haven't broken anything and all tests are passing.
8. Create a pull request on the **[`dev`](https://github.com/juliangarnier/anime/tree/dev)** branch.

## Consider supporting this project via GitHub Sponsors

I couldn't respond to issues and fix bugs without the support of my sponsors. If you find Anime.js valuable in your work, please consider becoming a sponsor via [GitHub Sponsors](https://github.com/sponsors/juliangarnier)! ❤️

---

## File: LICENSE.md

The MIT License

Copyright (c) 2025 Julian Garnier

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

---

## File: package.json

{
  "name": "animejs",
  "version": "4.5.0",
  "description": "JavaScript animation engine",
  "homepage": "https://animejs.com",
  "author": "Julian Garnier <[email protected]>",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/juliangarnier/anime.git"
  },
  "bugs": {
    "url": "https://github.com/juliangarnier/anime/issues"
  },
  "funding": {
    "type": "github",
    "url": "https://github.com/sponsors/juliangarnier"
  },
  "keywords": [
    "anime",
    "animejs",
    "anime.js",
    "timer",
    "animation",
    "timeline",
    "animatable",
    "draggable",
    "scope",
    "engine",
    "scroll",
    "easings",
    "cubic-bezier",
    "spring",
    "splitText",
    "CSS",
    "SVG",
    "WAAPI",
    "Canvas",
    "WebGL",
    "treejs",
    "tree.js"
  ],
  "files": [
    "dist"
  ],
  "sideEffects": [
    "./dist/modules/adapters/**",
    "./src/adapters/**"
  ],
  "type": "module",
  "main": "./dist/modules/index.cjs",
  "module": "./dist/modules/index.js",
  "types": "./dist/modules/index.d.ts",
  "jsdelivr": "./dist/bundles/anime.umd.min.js",
  "unpkg": "./dist/bundles/anime.umd.min.js",
  "exports": {
    "./package.json": "./package.json",
    ".": {
      "types": "./dist/modules/index.d.ts",
      "require": "./dist/modules/index.cjs",
      "import": "./dist/modules/index.js",
      "default": "./dist/modules/index.cjs"
    },
    "./timer": {
      "types": "./dist/modules/timer/index.d.ts",
      "require": "./dist/modules/timer/index.cjs",
      "import": "./dist/modules/timer/index.js",
      "default": "./dist/modules/timer/index.cjs"
    },
    "./animation": {
      "types": "./dist/modules/animation/index.d.ts",
      "require": "./dist/modules/animation/index.cjs",
      "import": "./dist/modules/animation/index.js",
      "default": "./dist/modules/animation/index.cjs"
    },
    "./timeline": {
      "types": "./dist/modules/timeline/index.d.ts",
      "require": "./dist/modules/timeline/index.cjs",
      "import": "./dist/modules/timeline/index.js",
      "default": "./dist/modules/timeline/index.cjs"
    },
    "./animatable": {
      "types": "./dist/modules/animatable/index.d.ts",
      "require": "./dist/modules/animatable/index.cjs",
      "import": "./dist/modules/animatable/index.js",
      "default": "./dist/modules/animatable/index.cjs"
    },
    "./draggable": {
      "types": "./dist/modules/draggable/index.d.ts",
      "require": "./dist/modules/draggable/index.cjs",
      "import": "./dist/modules/draggable/index.js",
      "default": "./dist/modules/draggable/index.cjs"
    },
    "./scope": {
      "types": "./dist/modules/scope/index.d.ts",
      "require": "./dist/modules/scope/index.cjs",
      "import": "./dist/modules/scope/index.js",
      "default": "./dist/modules/scope/index.cjs"
    },
    "./engine": {
      "types": "./dist/modules/engine/index.d.ts",
      "require": "./dist/modules/engine/index.cjs",
      "import": "./dist/modules/engine/index.js",
      "default": "./dist/modules/engine/index.cjs"
    },
    "./events": {
      "types": "./dist/modules/events/index.d.ts",
      "require": "./dist/modules/events/index.cjs",
      "import": "./dist/modules/events/index.js",
      "default": "./dist/modules/events/index.cjs"
    },
    "./layout": {
      "types": "./dist/modules/layout/index.d.ts",
      "require": "./dist/modules/layout/index.cjs",
      "import": "./dist/modules/layout/index.js",
      "default": "./dist/modules/layout/index.cjs"
    },
    "./easings": {
      "types": "./dist/modules/easings/index.d.ts",
      "require": "./dist/modules/easings/index.cjs",
      "import": "./dist/modules/easings/index.js",
      "default": "./dist/modules/easings/index.cjs"
    },
    "./easings/eases": {
      "types": "./dist/modules/easings/eases/index.d.ts",
      "require": "./dist/modules/easings/eases/index.cjs",
      "import": "./dist/modules/easings/eases/index.js",
      "default": "./dist/modules/easings/eases/index.cjs"
    },
    "./easings/linear": {
      "types": "./dist/modules/easings/linear/index.d.ts",
      "require": "./dist/modules/easings/linear/index.cjs",
      "import": "./dist/modules/easings/linear/index.js",
      "default": "./dist/modules/easings/linear/index.cjs"
    },
    "./easings/steps": {
      "types": "./dist/modules/easings/steps/index.d.ts",
      "require": "./dist/modules/easings/steps/index.cjs",
      "import": "./dist/modules/easings/steps/index.js",
      "default": "./dist/modules/easings/steps/index.cjs"
    },
    "./easings/irregular": {
      "types": "./dist/modules/easings/irregular/index.d.ts",
      "require": "./dist/modules/easings/irregular/index.cjs",
      "import": "./dist/modules/easings/irregular/index.js",
      "default": "./dist/modules/easings/irregular/index.cjs"
    },
    "./easings/cubic-bezier": {
      "types": "./dist/modules/easings/cubic-bezier/index.d.ts",
      "require": "./dist/modules/easings/cubic-bezier/index.cjs",
      "import": "./dist/modules/easings/cubic-bezier/index.js",
      "default": "./dist/modules/easings/cubic-bezier/index.cjs"
    },
    "./easings/spring": {
      "types": "./dist/modules/easings/spring/index.d.ts",
      "require": "./dist/modules/easings/spring/index.cjs",
      "import": "./dist/modules/easings/spring/index.js",
      "default": "./dist/modules/easings/spring/index.cjs"
    },
    "./utils": {
      "types": "./dist/modules/utils/index.d.ts",
      "require": "./dist/modules/utils/index.cjs",
      "import": "./dist/modules/utils/index.js",
      "default": "./dist/modules/utils/index.cjs"
    },
    "./svg": {
      "types": "./dist/modules/svg/index.d.ts",
      "require": "./dist/modules/svg/index.cjs",
      "import": "./dist/modules/svg/index.js",
      "default": "./dist/modules/svg/index.cjs"
    },
    "./text": {
      "types": "./dist/modules/text/index.d.ts",
      "require": "./dist/modules/text/index.cjs",
      "import": "./dist/modules/text/index.js",
      "default": "./dist/modules/text/index.cjs"
    },
    "./waapi": {
      "types": "./dist/modules/waapi/index.d.ts",
      "require": "./dist/modules/waapi/index.cjs",
      "import": "./dist/modules/waapi/index.js",
      "default": "./dist/modules/waapi/index.cjs"
    },
    "./adapters": {
      "types": "./dist/modules/adapters/index.d.ts",
      "require": "./dist/modules/adapters/index.cjs",
      "import": "./dist/modules/adapters/index.js",
      "default": "./dist/modules/adapters/index.cjs"
    },
    "./adapters/three": {
      "types": "./dist/modules/adapters/three/index.d.ts",
      "require": "./dist/modules/adapters/three/index.cjs",
      "import": "./dist/modules/adapters/three/index.js",
      "default": "./dist/modules/adapters/three/index.cjs"
    }
  },
  "peerDependencies": {
    "three": ">=0.150.0",
    "@types/three": ">=0.150.0"
  },
  "peerDependenciesMeta": {
    "three": {
      "optional": true
    },
    "@types/three": {
      "optional": true
    }
  },
  "devDependencies": {
    "@rollup/plugin-terser": "^0.4.4",
    "@types/mocha": "^10.0.10",
    "@types/node": "^24.3.0",
    "browser-sync": "^3.0.4",
    "chai": "^4.3.10",
    "mocha": "^10.2.0",
    "nodemon": "^3.1.10",
    "rollup": "^4.9.1",
    "three": "^0.184.0",
    "@types/three": "^0.184.0",
    "tweaks": "^0.3.4",
    "typescript": "^5.9.2"
  },
  "scripts": {
    "dev": "nodemon --quiet --watch src --ext js --exec \"rollup -c && tsc -p tsconfig.types.json && echo '\\n\\033[32m✓ modules and types compiled\\n\\033[36m⊙ watching for changes...\\n\\033[0m'\"",
    "dev:test": "npm run dev & npm run test:browser",
    "build": "rm -rf dist && build=true rollup -c && tsc -p tsconfig.types.json && echo '\\n\\033[32m✓ build completed\\n\\033[0m'",
    "test:browser": "browser-sync start --startPath tests/index.html --server --files 'dist/modules/**/*.js' 'tests/suites/**/*.js' --no-notify --directory",
    "test:node": "node --allow-natives-syntax \"node_modules/.bin/mocha\" -u tdd --timeout 20000 \"./tests/suites/node.test.js\"",
    "open:examples": "browser-sync start --startPath examples --server --no-notify --directory --files '**/*.js'",
    "typecheck": "tsc -p . && tsc -p tests && tsc -p examples",
    "typecheck:examples": "tsc -p examples",
    "typecheck:tests": "tsc -p tests"
  }
}

---

## File: tsconfig.json

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM"],
    "module": "esnext",
    "target": "ESNext",
    "moduleResolution": "bundler",
    "allowJs": true,
    "checkJs": true,
    "noEmit": true
  },
  "include": ["src/**/*.js"]
}

---

## File: tsconfig.types.json

{
  "compilerOptions": {
    "lib": ["ESNext", "DOM"],
    "module": "nodenext",
    "moduleResolution": "nodenext",
    "target": "esnext",
    "allowJs": true,
    "checkJs": true,
    "declaration": true,
    "emitDeclarationOnly": true,
    "outDir": "./dist/modules/"
  },
  "include": ["./src/**/*.js"],
}

---

## File: examples/tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "strictFunctionTypes": true,
    "noImplicitReturns": true
  },
  "include": ["**/*.js"]
  
}

---

## File: tests/tsconfig.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "animejs": ["dist/modules/index.js"],
    }
  },
  "include": ["**/*.js"],
  "exclude": ["run.js", "suites/node.test.js", "suites/build.test.js", "playground/assets/**"]
}

---

## File: .github/FUNDING.yml

github: juliangarnier

---

## File: .github/ISSUE_TEMPLATE/bug_report.md

---
name: Bug report
about: Create a report to help us improve
title: "[BUG]"
labels: bug
assignees: ''

---

## Describe the bug

A clear and concise description of what the bug is.
If you're using an LLM to write the issue, please make sure that the text actually means something, and please, keep it short, LLMs tend to write longer texts than needed.
Do not post screenshots of your text editor. Quaote the code directly in the issue with [adequate code formatting](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#quoting-code).

## Provide a minimal reproduction demo of the bug

Use this [CodePen template](https://codepen.io/pen?template=pvoGoxR) or use a similar service to provide a minimal reproduction demo so I can quickly follow the steps to reproduce your problem.

## Detail the steps to reproduce the issue

For example:
1. In Chrome 138
2. Open this [demo](https://codepen.io/pen?template=pvoGoxR)
2. Click on '....'
3. Scroll down to '....'
4. See error

You can also add a screen recording of the bug in action if it's too complicated to describe.

---

## File: .github/ISSUE_TEMPLATE/config.yml

blank_issues_enabled: false

---

## File: .github/ISSUE_TEMPLATE/documentation-update.md

---
name: Documentation update
about: Suggest a change to the documentation
title: "[DOCS]"
labels: documentation
assignees: ''

---

## Describe what the update does
A clear and concise description of what you want to change, improve or add.
Please don't post screenshots of text, instead paste the text directly in the issue with appropriate code formatting. Only uses screenshots for visual bug.

## Provide the suggested modification
Write your correction to the typo, suggested change, or addition to the documentation here.
If you're using an LLM to write this issue, please ensure the text is meaningful and keep it brief, as LLMs tend to produce unnecessarily long text.

---

## File: .github/ISSUE_TEMPLATE/feature_request.md

---
name: Feature request
about: Suggest an idea for this project
title: "[FEATURE]"
labels: feature proposal
assignees: ''

---

## Describe what the feature does
A clear and concise description of what the feature request is trying to solve or improve.
If you're using an LLM to write the issue, please make sure that the text actually means something, and please, keep it short, LLMs tend to write longer texts than needed.

## Provide a code example of what the feature should look like
A clear and concise description of what you want to happen, with an example of how the API should look like.
Do not post screenshots of your text editor, paste the code directly in the issue with the adequate code formatting.

## Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

## Additional context
Add any other context or screen recording about the feature request here.