{"id":10500,"library":"animejs","title":"Anime.js","description":"Anime.js is a fast, multipurpose, and lightweight JavaScript animation engine designed for the web. It allows developers to animate CSS properties, SVG, DOM attributes, and JavaScript objects with a simple yet powerful API. The current stable version is 4.3.6, with frequent patch releases addressing bug fixes and minor improvements, alongside feature releases introducing new capabilities like Auto Layout. Its key differentiators include its small footprint, versatility across different animation targets, and an intuitive API that simplifies complex animation sequences and timelines, making it suitable for both simple and advanced motion designs.","status":"active","version":"4.3.6","language":"javascript","source_language":"en","source_url":"https://github.com/juliangarnier/anime","tags":["javascript","anime","animejs","anime.js","timer","animation","timeline","animatable","draggable","typescript"],"install":[{"cmd":"npm install animejs","lang":"bash","label":"npm"},{"cmd":"yarn add animejs","lang":"bash","label":"yarn"},{"cmd":"pnpm add animejs","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Anime.js is primarily consumed as an ES module. While CommonJS `require` might work via transpilation, direct `import` is the standard for modern Node.js and browser environments. The `anime` function is the main entry point for creating animations and accessing utilities like `timeline`.","wrong":"const anime = require('animejs');","symbol":"anime","correct":"import anime from 'animejs';"},{"note":"As of v4.3.0, the `createLayout()` function for layout animations is provided as a named export, allowing for better tree-shaking. Accessing it as a method on the default `anime` object is deprecated or incorrect in modern setups.","wrong":"const layout = anime.createLayout();","symbol":"createLayout","correct":"import { createLayout } from 'animejs';"},{"note":"Introduced in v4.2.1, `createDraggable()` is a named export. It's recommended to import it directly for explicit dependency management and tree-shaking benefits.","wrong":"const draggable = anime.createDraggable();","symbol":"createDraggable","correct":"import { createDraggable } from 'animejs';"},{"note":"For TypeScript users, key types like `AnimeInstance` can be imported directly to enhance type safety when working with animation objects.","symbol":"AnimeInstance","correct":"import type { AnimeInstance } from 'animejs';"}],"quickstart":{"code":"import anime, { createLayout } from 'animejs';\n\n// Create a basic HTML structure for demonstration\ndocument.body.innerHTML = `\n  <style>\n    .box { width: 100px; height: 100px; background-color: #3f51b5; margin: 10px; border-radius: 8px; }\n    .container { display: flex; flex-direction: column; align-items: flex-start; }\n  </style>\n  <div class=\"container\">\n    <div id=\"box1\" class=\"box\"></div>\n    <div id=\"box2\" class=\"box\"></div>\n  </div>\n`;\n\nconst box1 = document.getElementById('box1');\nconst box2 = document.getElementById('box2');\n\n// Basic animation on a single element\nanime({\n  targets: box1,\n  translateX: 270,\n  rotate: '1turn',\n  backgroundColor: '#ff4081',\n  duration: 1200,\n  easing: 'easeInOutQuad',\n  loop: true,\n  direction: 'alternate'\n});\n\n// Animation using a timeline for sequential effects\nconst tl = anime.timeline({\n  easing: 'easeOutExpo',\n  duration: 750,\n  loop: true,\n  delay: anime.stagger(100) // Delay between each box in the timeline\n});\n\ntl.add({\n  targets: box2,\n  scale: [0.8, 1.2],\n  opacity: [0, 1]\n})\n.add({\n  targets: box2,\n  translateY: 50,\n  backgroundColor: '#4caf50'\n}, '-=250'); // Start this animation 250ms before the previous one ends\n\n// Example of AutoLayout (requires multiple elements in a container to show changes)\nconst layoutAnim = createLayout({\n  targets: '.container .box',\n  easing: 'easeOutElastic(1, .8)',\n  duration: 1000\n});\n\n// You would trigger layoutAnim.animate() on a state change that affects layout\n// For demonstration, let's just animate an arbitrary property to see layout changes\nconst toggleLayout = () => {\n  if (box1 && box2) {\n    const newFlexDirection = box1.style.order === '1' ? 'column' : 'row';\n    box1.style.order = box1.style.order === '1' ? '0' : '1';\n    layoutAnim.animate({\n      targets: '.container',\n      flexDirection: newFlexDirection,\n      opacity: 0.9,\n      update: layoutAnim.onLayoutUpdate // Keep layout in sync during animation\n    });\n  }\n};\n\nsetTimeout(toggleLayout, 5000); // Trigger a layout change after 5 seconds","lang":"typescript","description":"Demonstrates basic CSS property animation, sequencing with timelines, and using the `createLayout` function to animate layout changes on DOM elements."},"warnings":[{"fix":"Replace `anime.utils.interpolate(val1, val2, ratio)` with `anime.utils.lerp(val1, val2, ratio)`.","message":"The `interpolate()` utility function was removed in v4.2.0. Replace its usage with the simplified `lerp()` function, which performs linear interpolation.","severity":"breaking","affected_versions":">=4.2.0"},{"fix":"Adjust calls to `lerp()` to match its new signature (without the clock parameter) or migrate to `anime.utils.damp()` for damping.","message":"In v4.2.0, the `lerp()` function's clock parameter was removed. For framerate-dependent damping effects, use the new `damp()` utility function instead.","severity":"breaking","affected_versions":">=4.2.0"},{"fix":"To set a CSS variable name without computation, use `x: () => 'var(--my-value)'` within your animation parameters or `element.style.setProperty('--my-var', 'value');`.","message":"Setting CSS variables directly using `anime.utils.set()` from v4.2.0 onwards now computes the variable value. To set the variable name directly without conversion, use a function-based value for the property or the native `element.style.setProperty()` method.","severity":"breaking","affected_versions":">=4.2.0"},{"fix":"Update Anime.js to version 4.3.5 or newer to resolve animation problems related to the `background` CSS property.","message":"A regression introduced in v4.3.0 prevented CSS computed styles of the `background` property from being correctly interpreted as a color value, causing animation issues. This was fixed in v4.3.5.","severity":"gotcha","affected_versions":">=4.3.0 <4.3.5"},{"fix":"Upgrade Anime.js to v4.3.6 or a later version if you are utilizing `createLayout()` for animating inline HTML elements to ensure correct behavior.","message":"Multiple regressions in v4.3.x, spanning versions v4.3.0 to v4.3.5, led to issues where inline HTML tags (e.g., `<span>`, `<strong>`) were not correctly detected or animated when using the `createLayout()` method, particularly when surrounded by comments. These issues have been progressively fixed up to v4.3.6.","severity":"gotcha","affected_versions":">=4.3.0 <4.3.6"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Replace calls to `anime.utils.interpolate()` with `anime.utils.lerp()`.","cause":"The `interpolate()` utility was removed in Anime.js v4.2.0 as part of a refactor towards simpler utilities.","error":"TypeError: anime.utils.interpolate is not a function"},{"fix":"Update Anime.js to version 4.3.5 or higher to resolve the `background` property animation regression.","cause":"A bug in Anime.js versions between 4.3.0 and 4.3.4 affected the interpretation of `background` computed styles, leading to faulty animations.","error":"CSS 'background' property does not animate smoothly or displays incorrect color values during animation."},{"fix":"Upgrade Anime.js to version 4.3.6 or later to fix layout animation issues affecting inline elements.","cause":"Regressions in Anime.js v4.3.x prevented inline HTML elements from being correctly detected and animated by the `createLayout()` method, particularly when comments were present.","error":"Inline elements within `createLayout()` animations are not moving, are mispositioned, or disappear."},{"fix":"Change `const layout = anime.createLayout();` to `import { createLayout } from 'animejs';` and then `const layout = createLayout();`.","cause":"The `createLayout` function, introduced in v4.3.0, is a named export and needs to be imported explicitly.","error":"Uncaught ReferenceError: createLayout is not defined (when using `createLayout()` directly)"}],"ecosystem":"npm"}