{"id":14701,"library":"metal-anim","title":"Metal.js Animation Utility","description":"metal-anim is an animation utility specifically designed for the now-deprecated Metal.js JavaScript framework. Released as version 2.0.1, it provided capabilities for animating UI components and elements within the Metal.js ecosystem. The parent framework, Metal.js, was officially deprecated in September 2023 and is no longer actively maintained or supported in its open-source form by Liferay, Inc. As such, `metal-anim` is also considered abandoned, with no further updates, bug fixes, or new features expected. Developers seeking animation solutions are advised to consider actively maintained libraries, as this package is tied to an unmaintained framework and may have compatibility issues with modern JavaScript environments or browsers. It was last published seven years ago, aligning with the deprecation status of its core dependency.","status":"abandoned","version":"2.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/metal/metal-anim","tags":["javascript","metal"],"install":[{"cmd":"npm install metal-anim","lang":"bash","label":"npm"},{"cmd":"yarn add metal-anim","lang":"bash","label":"yarn"},{"cmd":"pnpm add metal-anim","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency, metal-anim is an animation utility for the Metal.js framework, which is itself abandoned.","package":"metal","optional":false}],"imports":[{"note":"Assumed named export for the primary animation function. Early versions of Metal.js and Node.js v0.12 might have relied on CommonJS, but modern usage would prefer ESM.","wrong":"const animate = require('metal-anim');","symbol":"animate","correct":"import { animate } from 'metal-anim';"},{"note":"Assumed named export for animation easing functions. The specific structure (e.g., `easing.bounce`) is inferred from common animation library patterns due to lack of explicit documentation.","wrong":"import * as anim from 'metal-anim'; const customEase = anim.easing.bounce;","symbol":"easing","correct":"import { easing } from 'metal-anim';"},{"note":"Assumed named export for creating complex animation sequences. This aligns with standard practices in JavaScript animation libraries for orchestrating multiple animations.","wrong":"import metalAnim from 'metal-anim'; // if not a default export","symbol":"timeline","correct":"import { timeline } from 'metal-anim';"}],"quickstart":{"code":"import { animate, easing } from 'metal-anim';\n\nconst element = document.createElement('div');\nelement.id = 'animated-box';\nelement.style.width = '100px';\nelement.style.height = '100px';\nelement.style.backgroundColor = 'blue';\nelement.style.position = 'absolute';\nelement.style.left = '0px';\ndocument.body.appendChild(element);\n\n// Basic animation: move the box to the right\nanimate({\n  element: '#animated-box',\n  properties: {\n    left: '500px',\n    backgroundColor: 'red',\n    transform: 'rotate(360deg)'\n  },\n  duration: 1000, // milliseconds\n  easing: easing.easeInOutQuad,\n  onComplete: () => {\n    console.log('Animation complete!');\n    // Animate back or start a new sequence\n    animate({\n      element: '#animated-box',\n      properties: {\n        left: '0px',\n        backgroundColor: 'blue',\n        transform: 'rotate(0deg)'\n      },\n      duration: 800,\n      easing: easing.easeOutBounce,\n      delay: 500\n    });\n  }\n}).start();\n\n// Note: The specific API (`element`, `properties`, `duration`, `easing`, `onComplete`, `start()`) is inferred based on common JavaScript animation libraries due to the absence of direct documentation for metal-anim.","lang":"typescript","description":"Demonstrates animating a DOM element's position, color, and rotation using assumed `animate` and `easing` functions from `metal-anim`."},"warnings":[{"fix":"Migrate to a modern, actively maintained animation library (e.g., Anime.js, Framer Motion, GSAP) that is compatible with current JavaScript standards and frameworks.","message":"The underlying Metal.js framework, which `metal-anim` depends on, has been officially deprecated since September 2023 and is no longer actively maintained. This means `metal-anim` itself is effectively abandoned and unlikely to receive updates, bug fixes, or security patches.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"If encountering module resolution errors (`require is not defined` or similar), try configuring your bundler (Webpack, Rollup, Parcel) to handle CJS modules or use `require()` syntax directly if in a Node.js environment supporting it. However, the recommended fix is migration to a modern library.","message":"Older versions of Metal.js and its utilities, including `metal-anim`, might have assumed a CommonJS (require) module system, especially given the `node: >=0.12.0` engine requirement. Using modern ESM `import` statements might require specific build configurations or bundler setups, or might not work at all without transpilation.","severity":"gotcha","affected_versions":"<2.0.0"},{"fix":"Thoroughly test `metal-anim` in your target environment. For new projects, or projects experiencing issues, migration to an actively developed animation library is strongly recommended.","message":"Due to the abandonment of the Metal.js ecosystem, `metal-anim` may not be compatible with newer browser APIs, JavaScript language features, or other contemporary frontend frameworks and libraries, potentially leading to unexpected behavior or runtime errors.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `metal-anim` is correctly installed (`npm install metal-anim`) and check your import statement. Verify if your build setup correctly handles ES modules or CommonJS. As official documentation is scarce, confirm expected exports by inspecting the `node_modules/metal-anim` package.","cause":"The imported `animate` or `easing` function is not found, likely due to incorrect import paths, module resolution issues (ESM vs. CJS), or the library not exporting these symbols as expected.","error":"TypeError: Cannot read properties of undefined (reading 'animate') or (reading 'easing')"},{"fix":"Double-check your element selector (`#animated-box`). Confirm the element is appended to the DOM before the animation starts. Inspect browser developer tools for CSS conflicts or JavaScript errors in the console. Ensure all required parameters for the `animate` function are provided and correctly typed (e.g., `duration` is a number).","cause":"This can stem from several issues: the target element selector is incorrect, the element is not in the DOM, CSS properties are being overridden, or the animation API call itself has an error (e.g., incorrect property names, missing `start()` call).","error":"Animation does not run or element does not change style/position as expected."}],"ecosystem":"npm"}