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!


anime.js

JavaScript animation engine | animejs.com

npm version npm downloads

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.
It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Getting started | Documentation | Demos and examples | Browser support

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+

anime-js-v3-logo

Website | Documentation | Demos and examples | MIT License | © 2019 Julian Garnier.

juliangarnier/anime

{
"props": {
"initialPayload": {
"allShortcutsEnabled": false,
"path": "/",
"repo": {
"id": 53809090,
"defaultBranch": "master",
"name": "anime",
"ownerLogin": "juliangarnier",
"currentUserCanPush": false,
"isFork": false,
"isEmpty": false,
"createdAt": "2016-03-13T21:37:45.000Z",
"ownerAvatar": "https://avatars.githubusercontent.com/u/1268691?v=4",
"public": true,
"private": false,
"isOrgOwned": false
},
"currentUser": null,
"refInfo": {
"name": "master",
"listCacheKey": "v0:1701163853.0",
"canEdit": false,
"refType": "branch",
"currentOid": "70ea16d39681f28608df9bb1a5a22e93794afdb4"
},
"tree": {
"items": [
{
"name": ".github",
"path": ".github",
"contentType": "directory"
},
{
"name": "documentation",
"path": "documentation",
"contentType": "directory"
},
{
"name": "lib",
"path": "lib",
"contentType": "directory"
},
{
"name": "src",
"path": "src",
"contentType": "directory"
},
{
"name": ".gitignore",
"path": ".gitignore",
"contentType": "file"
},
{
"name": "CNAME",
"path": "CNAME",
"contentType": "file"
},
{
"name": "LICENSE.md",
"path": "LICENSE.md",
"contentType": "file"
},
{
"name": "README.md",
"path": "README.md",
"contentType": "file"
},
{
"name": "bower.json",
"path": "bower.json",
"contentType": "file"
},
{
"name": "build.js",
"path": "build.js",
"contentType": "file"
},
{
"name": "package-lock.json",
"path": "package-lock.json",
"contentType": "file"
},
{
"name": "package.json",
"path": "package.json",
"contentType": "file"
}
],
"templateDirectorySuggestionUrl": null,
"readme": null,
"totalCount": 12,
"showBranchInfobar": false
},
"fileTree": null,
"fileTreeProcessingTime": null,
"foldersToFetch": [],
"treeExpanded": false,
"symbolsExpanded": false,
"isOverview": true,
"overview": {
"banners": {
"shouldRecommendReadme": false,
"isPersonalRepo": false,
"showUseActionBanner": false,
"actionSlug": null,
"actionId": null,
"showProtectBranchBanner": false,
"recentlyTouchedDataChannel": null,
"publishBannersInfo": {
"dismissActionNoticePath": "/settings/dismiss-notice/publish_action_from_repo",
"releasePath": "/juliangarnier/anime/releases/new?marketplace=true",
"showPublishActionBanner": false
},
"interactionLimitBanner": null,
"showInvitationBanner": false,
"inviterName": null
},
"codeButton": {
"contactPath": "/contact",
"isEnterprise": false,
"local": {
"protocolInfo": {
"httpAvailable": true,
"sshAvailable": null,
"httpUrl": "https://github.com/juliangarnier/anime.git",
"showCloneWarning": null,
"sshUrl": null,
"sshCertificatesRequired": null,
"sshCertificatesAvailable": null,
"ghCliUrl": "gh repo clone juliangarnier/anime",
"defaultProtocol": "http",
"newSshKeyUrl": "/settings/ssh/new",
"setProtocolPath": "/users/set_protocol"
},
"platformInfo": {
"cloneUrl": "https://desktop.github.com",
"showVisualStudioCloneButton": false,
"visualStudioCloneUrl": "https://windows.github.com",
"showXcodeCloneButton": false,
"xcodeCloneUrl": "https://developer.apple.com",
"zipballUrl": "/juliangarnier/anime/archive/refs/heads/master.zip"
}
},
"newCodespacePath": "/codespaces/new?hide_repo_select=true&repo=53809090"
},
"popovers": {
"rename": null,
"renamedParentRepo": null
},
"commitCount": "744",
"overviewFiles": [
{
"displayName": "README.md",
"repoName": "anime",
"refName": "master",
"path": "README.md",
"preferredFileType": "readme",
"tabName": "README",
"richText": "<article class=\"markdown-body entry-content container-lg\" itemprop=\"text\"><div class=\"markdown-alert markdown-alert-important\" dir=\"auto\"><p class=\"markdown-alert-title\" dir=\"auto\"><svg class=\"octicon octicon-report mr-2\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"></path></svg>Important</p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content--animejs-v4-is-now-available-in-early-access-\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#-animejs-v4-is-now-available-in-early-access-\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>🎉 Anime.js V4 is now available in early access 🎉</h2>\n<p dir=\"auto\">After years in the making, Anime.js V4 is finally available in early access for my <strong><a href=\"https://github.com/sponsors/juliangarnier\">GitHub Sponsors</a></strong>!</p>\n</div>\n<h1 align=\"center\" tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-------animejs\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#------animejs\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>\n <a href=\"https://animejs.com\" rel=\"nofollow\"><img src=\"/juliangarnier/anime/raw/master/documentation/assets/img/animejs-v3-header-animation.gif\" width=\"250\" data-animated-image=\"\" style=\"max-width: 100%;\"></a>\n <br>\n anime.js\n</h1>\n<h4 align=\"center\" tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-javascript-animation-engine--animejscom\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#javascript-animation-engine--animejscom\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>JavaScript animation engine | <a href=\"https://animejs.com\" rel=\"nofollow\">animejs.com</a></h4>\n<p align=\"center\" dir=\"auto\">\n <a href=\"https://www.npmjs.com/package/animejs\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/011820ee25bf1d3ddaf635d869903b98eccaeae7/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f616e696d656a732e7376673f7374796c653d666c61742d737175617265\" alt=\"npm version\" style=\"max-width: 100%;\"></a>\n <a href=\"https://www.npmjs.com/package/animejs\" rel=\"nofollow\"><img src=\"https://camo.githubusercontent.com/3e9b69d51aee25fad784a3097676696096621d47/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f616e696d656a732e7376673f7374796c653d666c61742d737175617265\" alt=\"npm downloads\" style=\"max-width: 100%;\"></a>\n</p>\n<blockquote align=\"center\">\n <em>Anime.js</em> (<code>/ˈæn.ə.meɪ/</code>) is a lightweight JavaScript animation library with a simple, yet powerful API.<br>\n It works with CSS properties, SVG, DOM attributes and JavaScript Objects.\n</blockquote>\n<p align=\"center\" dir=\"auto\">\n <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>\n</p>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-getting-started\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#getting-started\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Getting started</h2>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-download\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#download\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Download</h3>\n<p dir=\"auto\">Via npm</p>\n<div class=\"highlight highlight-source-shell notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"$ npm install animejs --save\"><pre>$ npm install animejs --save</pre></div>\n<p dir=\"auto\">or manual <a href=\"https://github.com/juliangarnier/anime/archive/master.zip\">download</a>.</p>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-usage\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#usage\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Usage</h3>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-es6-modules\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#es6-modules\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>ES6 modules</h4>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"import anime from 'animejs/lib/anime.es.js';\"><pre><span class=\"pl-k\">import</span> <span class=\"pl-s1\">anime</span> <span class=\"pl-k\">from</span> <span class=\"pl-s\">'animejs/lib/anime.es.js'</span><span class=\"pl-kos\">;</span></pre></div>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-commonjs\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#commonjs\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>CommonJS</h4>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"const anime = require('animejs');\"><pre><span class=\"pl-k\">const</span> <span class=\"pl-s1\">anime</span> <span class=\"pl-c1\">=</span> <span class=\"pl-en\">require</span><span class=\"pl-kos\">(</span><span class=\"pl-s\">'animejs'</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<h4 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-file-include\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#file-include\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>File include</h4>\n<p dir=\"auto\">Link <code>anime.min.js</code> in your HTML :</p>\n<div class=\"highlight highlight-text-html-basic notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"&lt;script src=&quot;anime.min.js&quot;&gt;&lt;/script&gt;\"><pre><span class=\"pl-kos\">&lt;</span><span class=\"pl-ent\">script</span> <span class=\"pl-c1\">src</span>=\"<span class=\"pl-s\">anime.min.js</span>\"<span class=\"pl-kos\">&gt;</span><span class=\"pl-kos\">&lt;/</span><span class=\"pl-ent\">script</span><span class=\"pl-kos\">&gt;</span></pre></div>\n<h3 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-hello-world\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#hello-world\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Hello world</h3>\n<div class=\"highlight highlight-source-js notranslate position-relative overflow-auto\" dir=\"auto\" data-snippet-clipboard-copy-content=\"anime({\n targets: 'div',\n translateX: 250,\n rotate: '1turn',\n backgroundColor: '#FFF',\n duration: 800\n});\"><pre><span class=\"pl-en\">anime</span><span class=\"pl-kos\">(</span><span class=\"pl-kos\">{</span>\n <span class=\"pl-c1\">targets</span>: <span class=\"pl-s\">'div'</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">translateX</span>: <span class=\"pl-c1\">250</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">rotate</span>: <span class=\"pl-s\">'1turn'</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">backgroundColor</span>: <span class=\"pl-s\">'#FFF'</span><span class=\"pl-kos\">,</span>\n <span class=\"pl-c1\">duration</span>: <span class=\"pl-c1\">800</span>\n<span class=\"pl-kos\">}</span><span class=\"pl-kos\">)</span><span class=\"pl-kos\">;</span></pre></div>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-documentation\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#documentation\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><a href=\"https://animejs.com/documentation/\" rel=\"nofollow\">Documentation</a></h2>\n<ul dir=\"auto\">\n<li><a href=\"https://animejs.com/documentation/#cssSelector\" rel=\"nofollow\">Targets</a></li>\n<li><a href=\"https://animejs.com/documentation/#cssProperties\" rel=\"nofollow\">Properties</a></li>\n<li><a href=\"https://animejs.com/documentation/#duration\" rel=\"nofollow\">Property parameters</a></li>\n<li><a href=\"https://animejs.com/documentation/#direction\" rel=\"nofollow\">Animation parameters</a></li>\n<li><a href=\"https://animejs.com/documentation/#unitlessValue\" rel=\"nofollow\">Values</a></li>\n<li><a href=\"https://animejs.com/documentation/#animationKeyframes\" rel=\"nofollow\">Keyframes</a></li>\n<li><a href=\"https://animejs.com/documentation/#staggeringBasics\" rel=\"nofollow\">Staggering</a></li>\n<li><a href=\"https://animejs.com/documentation/#timelineBasics\" rel=\"nofollow\">Timeline</a></li>\n<li><a href=\"https://animejs.com/documentation/#playPause\" rel=\"nofollow\">Controls</a></li>\n<li><a href=\"https://animejs.com/documentation/#update\" rel=\"nofollow\">Callbacks and promises</a></li>\n<li><a href=\"https://animejs.com/documentation/#motionPath\" rel=\"nofollow\">SVG Animations</a></li>\n<li><a href=\"https://animejs.com/documentation/#linearEasing\" rel=\"nofollow\">Easing functions</a></li>\n<li><a href=\"https://animejs.com/documentation/#remove\" rel=\"nofollow\">Helpers</a></li>\n</ul>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-demos-and-examples\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#demos-and-examples\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><a href=\"http://codepen.io/collection/b392d3a52d6abf5b8d9fda4e4cab61ab/\" rel=\"nofollow\">Demos and examples</a></h2>\n<ul dir=\"auto\">\n<li><a href=\"http://codepen.io/collection/b392d3a52d6abf5b8d9fda4e4cab61ab/\" rel=\"nofollow\">CodePen demos and examples</a></li>\n<li><a href=\"http://juliangarnier.com\" rel=\"nofollow\">juliangarnier.com</a></li>\n<li><a href=\"https://animejs.com\" rel=\"nofollow\">animejs.com</a></li>\n<li><a href=\"http://tobiasahlin.com/moving-letters/\" rel=\"nofollow\">Moving letters</a> by <a href=\"https://twitter.com/tobiasahlin\" rel=\"nofollow\">@tobiasahlin</a></li>\n<li><a href=\"https://tympanus.net/Development/GradientTopographyAnimation/\" rel=\"nofollow\">Gradient topography animation</a> by <a href=\"https://twitter.com/crnacura\" rel=\"nofollow\">@crnacura</a></li>\n<li><a href=\"https://tympanus.net/Development/OrganicShapeAnimations/\" rel=\"nofollow\">Organic shape animations</a> by <a href=\"https://twitter.com/crnacura\" rel=\"nofollow\">@crnacura</a></li>\n<li><a href=\"https://tympanus.net/Tutorials/PiecesSlider/\" rel=\"nofollow\">Pieces slider</a> by <a href=\"https://twitter.com/lmgonzalves\" rel=\"nofollow\">@lmgonzalves</a></li>\n<li><a href=\"https://codepen.io/juliangarnier/pen/4fe31bbe8579a256e828cd4d48c86182?editors=0100\" rel=\"nofollow\">Staggering animations</a></li>\n<li><a href=\"https://codepen.io/juliangarnier/pen/444ed909fd5de38e3a77cc6e95fc1884\" rel=\"nofollow\">Easings animations</a></li>\n<li><a href=\"https://codepen.io/juliangarnier/pen/b3bb8ca599ad0f9d00dd044e56cbdea5?editors=0010\" rel=\"nofollow\">Sphere animation</a></li>\n<li><a href=\"https://codepen.io/juliangarnier/pen/6ca836535cbea42157d1b8d56d00be84?editors=0010\" rel=\"nofollow\">Layered animations</a></li>\n<li><a href=\"https://codepen.io/juliangarnier/pen/d43e8ec355c30871cbe775193255d6f6?editors=0010\" rel=\"nofollow\">anime.js logo animation</a></li>\n</ul>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"user-content-browser-support\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#browser-support\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a>Browser support</h2>\n<table>\n<thead>\n<tr>\n<th>Chrome</th>\n<th>Safari</th>\n<th>IE / Edge</th>\n<th>Firefox</th>\n<th>Opera</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>24+</td>\n<td>8+</td>\n<td>11+</td>\n<td>32+</td>\n<td>15+</td>\n</tr>\n</tbody>\n</table>\n<h2 tabindex=\"-1\" dir=\"auto\"><a id=\"\" class=\"anchor\" aria-hidden=\"true\" tabindex=\"-1\" href=\"#\"><svg class=\"octicon octicon-link\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" height=\"16\" aria-hidden=\"true\"><path d=\"m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z\"></path></svg></a><a href=\"https://animejs.com\" rel=\"nofollow\"><img src=\"/juliangarnier/anime/raw/master/documentation/assets/img/animejs-v3-logo-animation.gif\" width=\"150\" alt=\"anime-js-v3-logo\" data-animated-image=\"\" style=\"max-width: 100%;\"></a></h2>\n<p dir=\"auto\"><a href=\"https://animejs.com/\" rel=\"nofollow\">Website</a> | <a href=\"https://animejs.com/documentation/\" rel=\"nofollow\">Documentation</a> | <a href=\"http://codepen.io/collection/b392d3a52d6abf5b8d9fda4e4cab61ab/\" rel=\"nofollow\">Demos and examples</a> | <a href=\"/juliangarnier/anime/blob/master/LICENSE.md\">MIT License</a> | © 2019 <a href=\"http://juliangarnier.com\" rel=\"nofollow\">Julian Garnier</a>.</p>\n</article>",
"loaded": true,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": [
{
"level": 2,
"text": "🎉 Anime.js V4 is now available in early access 🎉",
"anchor": "-animejs-v4-is-now-available-in-early-access-",
"htmlText": "🎉 Anime.js V4 is now available in early access 🎉"
},
{
"level": 1,
"text": "\n anime.js\n",
"anchor": "------animejs",
"htmlText": "\n anime.js\n"
},
{
"level": 4,
"text": "JavaScript animation engine | animejs.com",
"anchor": "javascript-animation-engine--animejscom",
"htmlText": "JavaScript animation engine | animejs.com"
},
{
"level": 2,
"text": "Getting started",
"anchor": "getting-started",
"htmlText": "Getting started"
},
{
"level": 3,
"text": "Download",
"anchor": "download",
"htmlText": "Download"
},
{
"level": 3,
"text": "Usage",
"anchor": "usage",
"htmlText": "Usage"
},
{
"level": 4,
"text": "ES6 modules",
"anchor": "es6-modules",
"htmlText": "ES6 modules"
},
{
"level": 4,
"text": "CommonJS",
"anchor": "commonjs",
"htmlText": "CommonJS"
},
{
"level": 4,
"text": "File include",
"anchor": "file-include",
"htmlText": "File include"
},
{
"level": 3,
"text": "Hello world",
"anchor": "hello-world",
"htmlText": "Hello world"
},
{
"level": 2,
"text": "Documentation",
"anchor": "documentation",
"htmlText": "Documentation"
},
{
"level": 2,
"text": "Demos and examples",
"anchor": "demos-and-examples",
"htmlText": "Demos and examples"
},
{
"level": 2,
"text": "Browser support",
"anchor": "browser-support",
"htmlText": "Browser support"
},
{
"level": 2,
"text": "",
"anchor": "",
"htmlText": ""
}
],
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fjuliangarnier%2Fanime"
}
},
{
"displayName": "LICENSE.md",
"repoName": "anime",
"refName": "master",
"path": "LICENSE.md",
"preferredFileType": "license",
"tabName": "MIT",
"richText": null,
"loaded": false,
"timedOut": false,
"errorMessage": null,
"headerInfo": {
"toc": null,
"siteNavLoginPath": "/login?return_to=https%3A%2F%2Fgithub.com%2Fjuliangarnier%2Fanime"
}
}
],
"overviewFilesProcessingTime": 16.118388
}
},
"appPayload": {
"helpUrl": "https://docs.github.com",
"findFileWorkerPath": "/assets-cdn/worker/find-file-worker-32bb159cc57c.js",
"findInFileWorkerPath": "/assets-cdn/worker/find-in-file-worker-c6704d501c10.js",
"githubDevUrl": null,
"enabled_features": {
"code_nav_ui_events": false,
"copilot_conversational_ux": false,
"copilot_conversational_ux_embedding_update": false,
"copilot_popover_file_editor_header": false,
"copilot_smell_icebreaker_ux": true,
"copilot_workspace": false,
"codeview_firefox_inert": true
}
}
}
}
{
"accept-ranges": "bytes",
"cache-control": "max-age=0, private, must-revalidate",
"content-encoding": "gzip",
"content-security-policy": "default-src 'none'; base-uri 'self'; child-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com api.githubcopilot.com objects-origin.githubusercontent.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.com/assets-cdn/worker/ gist.github.com/assets-cdn/worker/",
"content-type": "text/html; charset=utf-8",
"date": "Mon, 26 Feb 2024 10:33:31 GMT",
"etag": "433a90fa4adaa1e1a7d67fededc062da",
"referrer-policy": "no-referrer-when-downgrade",
"server": "GitHub.com",
"set-cookie": "logged_in=no; Path=/; Domain=github.com; Expires=Wed, 26 Feb 2025 10:33:30 GMT; HttpOnly; Secure; SameSite=Lax",
"strict-transport-security": "max-age=31536000; includeSubdomains; preload",
"transfer-encoding": "chunked",
"vary": "X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, Accept-Encoding, Accept, X-Requested-With",
"x-content-type-options": "nosniff",
"x-frame-options": "deny",
"x-github-request-id": "C2A8:5F85:19DC152:248A81A:65DC68FA",
"x-xss-protection": "0"
}