{"id":14947,"library":"super-animejs","title":"anime.js","description":"anime.js (pronounced /'æn.ə.meɪ/) is a lightweight, general-purpose JavaScript animation library designed to work across a wide range of web technologies. It provides a simple yet powerful API for animating CSS properties, SVG, DOM attributes, and JavaScript Objects. The library is currently in its v4 major release, with the latest stable version being 4.3.6. It is actively maintained with frequent bug fixes and feature additions, as evidenced by recent patch releases. Key differentiators include its focus on performance, an ESM-first API for better tree-shaking, robust timeline capabilities, and a comprehensive set of easing functions. It's often chosen for its ease of use compared to more complex alternatives, making it suitable for both simple UI effects and more intricate motion design tasks.","status":"active","version":"3.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/juliangarnier/anime","tags":["javascript","anime","animation","CSS","transforms","SVG","canvas"],"install":[{"cmd":"npm install super-animejs","lang":"bash","label":"npm"},{"cmd":"yarn add super-animejs","lang":"bash","label":"yarn"},{"cmd":"pnpm add super-animejs","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Since v4, the core animation function is named `animate` and is a named export. The global `anime` object from v3 is replaced.","wrong":"import anime from 'animejs'; // v3 default import syntax","symbol":"animate","correct":"import { animate } from 'animejs';"},{"note":"Timelines are created using the `createTimeline` named export in v4.","wrong":"anime.timeline(); // v3 syntax","symbol":"createTimeline","correct":"import { createTimeline } from 'animejs';"},{"note":"The staggering utility is now a named export.","wrong":"anime.stagger(); // v3 syntax","symbol":"stagger","correct":"import { stagger } from 'animejs';"},{"note":"General utility functions are available via the `utils` named export.","symbol":"utils","correct":"import { utils } from 'animejs';"}],"quickstart":{"code":"import { animate } from 'animejs';\n\nconst targets = document.querySelectorAll('.my-element');\n\nif (targets.length > 0) {\n  animate(targets, {\n    translateX: 250,\n    rotate: '1turn',\n    backgroundColor: '#FF0000',\n    scale: [1, 1.2, 1],\n    duration: 800,\n    delay: (el, i) => 100 * i,\n    easing: 'easeOutQuad',\n    loop: true,\n    direction: 'alternate'\n  });\n} else {\n  console.warn('No elements found with class .my-element. Please add some div elements to the HTML.');\n}\n\n// Example for HTML structure:\n// <div class=\"my-element\"></div>\n// <div class=\"my-element\"></div>\n// <div class=\"my-element\"></div>","lang":"typescript","description":"This quickstart animates multiple DOM elements, demonstrating translation, rotation, background color, scaling, staggered delays, looping, and alternating direction, using the v4 API."},"warnings":[{"fix":"Refer to the v3 to v4 migration guide for a complete list of changes. Update imports and API calls, e.g., `anime({ targets: 'div' })` becomes `animate('div', {})`.","message":"anime.js v4 introduced significant breaking changes from v3. The global `anime` object has been largely replaced by named exports. Core functions like `animate`, `createTimeline`, and `stagger` must now be imported directly.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Refactor animation calls to pass the target as the first argument to `animate()`.","message":"The `targets` parameter in v3 (e.g., `anime({ targets: 'div' })`) has been replaced by the mandatory first argument of the `animate` function in v4 (e.g., `animate('div', { /* ... */ })`).","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Replace removed utilities with their v4 equivalents or import specialized easing functions where needed. Consult the documentation for specific replacements.","message":"Several utility functions and easing functions were removed or changed in v4. For instance, `interpolate()` was removed in favor of `lerp()`, and `lerp()`'s `clock` parameter was removed in favor of `damp()`. `linear()`, `irregular()`, `steps()`, and `cubicBezier()` easing functions must now be imported separately.","severity":"breaking","affected_versions":">=4.2.0"},{"fix":"For direct CSS variable name assignment, use `x: () => 'var(--value)'` or `element.style.setProperty('--my-var', 'value')`.","message":"Setting CSS variables using `utils.set()` now computes the variable value by default. To set the variable name directly without conversion, use a function-based value or `element.style.setProperty()`.","severity":"breaking","affected_versions":">=4.2.0"},{"fix":"Use `import { animate } from 'animejs';` for ESM, or `const { animate } = require('animejs');` for CommonJS.","message":"The default import path mentioned in older READMEs (`import anime from 'lib/anime.es.js'`) is not the standard and generally unnecessary for modern bundlers. The recommended way is to import directly from the package name.","severity":"gotcha","affected_versions":"All versions (especially v3+)"},{"fix":"Update animation configurations to use `reversed: true` or `alternate: true` instead of the `direction` string value.","message":"In v4, the `direction` parameter (e.g., `direction: 'reverse'`, `direction: 'alternate'`) has been replaced by two distinct boolean parameters: `reversed: true` and `alternate: true`.","severity":"deprecated","affected_versions":">=4.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change `import anime from 'animejs';` to `import { animate } from 'animejs';` and use `animate()` instead of `anime()`. For CommonJS, use `const { animate } = require('animejs');`.","cause":"Attempting to use `anime()` as a global function or default import from 'animejs' in v4, which is ESM-first and uses named exports.","error":"TypeError: anime is not a function"},{"fix":"Import `createTimeline` and use it: `import { createTimeline } from 'animejs'; const tl = createTimeline();`.","cause":"Attempting to use the v3 `anime.timeline()` syntax in v4.","error":"TypeError: anime.timeline is not a function"},{"fix":"Use `lerp()` instead of `interpolate()`. If you need framerate-dependent damping, use `damp()`.","cause":"Attempting to use the `interpolate()` utility function, which was removed in v4.2.0.","error":"ReferenceError: interpolate is not defined"},{"fix":"Rename `easing` parameter to `ease`. Use v4 naming conventions (e.g., `ease: 'outQuad'` instead of `'easeOutQuad'`). For specialized easings, import them explicitly, e.g., `import { cubicBezier } from 'animejs/easings/cubic-bezier';`.","cause":"Using v3 easing function names or trying to use certain specialized easings (like `linear()`, `cubicBezier()`) without importing them in v4. The `easing` parameter was also renamed to `ease`.","error":"Error: ease is not a valid easing function (or similar easing-related error)"}],"ecosystem":"npm"}