{"library":"lottie-web","title":"Lottie for Web","description":"Lottie-web is a JavaScript library designed to render animations exported from Adobe After Effects as JSON files, leveraging the Bodymovin plugin. It enables designers to deliver complex, vector-based animations across web platforms without the need for manual re-coding by engineers, significantly streamlining the animation pipeline. The package, as of the provided context, is at version 5.13.0, which includes critical bug fixes and improvements, notably around Node.js compatibility for SSR. Lottie-web is actively maintained, with new features and bug fixes released periodically, though major versions with breaking changes (like the recent v6) are less frequent. Key differentiators include its tight integration with After Effects, robust performance across SVG and Canvas renderers, and a comprehensive API for controlling animation playback, speed, and segments. It is a core component of the broader Lottie ecosystem, alongside its counterparts for Android, iOS, and React Native, providing a unified animation solution.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install lottie-web"],"cli":null},"imports":["import lottie from 'lottie-web';","lottie.loadAnimation({ container: document.getElementById('anim'), path: '/data.json' });","const anim = lottie.loadAnimation(...); anim.play(); anim.destroy();"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import lottie from 'lottie-web';\n\nconst animationData = {\n  v: '5.10.0',\n  fr: 60,\n  ip: 0,\n  op: 180,\n  w: 500,\n  h: 500,\n  nm: 'Simple Animation',\n  ddd: 0,\n  assets: [],\n  layers: [\n    {\n      ddd: 0,\n      ind: 1,\n      ty: 4,\n      nm: 'Square',\n      sr: 1,\n      ks: {\n        o: { a: 0, k: 100, ix: 11 },\n        r: { a: 0, k: 0, ix: 10 },\n        p: { a: 1, k: [{t:0, s:[250,250,0]}, {t:90, s:[100,250,0]}, {t:180, s:[250,250,0]}], ix: 2},\n        a: { a: 0, k: [25, 25, 0], ix: 1},\n        s: { a: 0, k: [100, 100, 100], ix: 6}\n      },\n      ao: 0,\n      shapes: [\n        {\n          ty: 'gr',\n          it: [\n            { ind: 0, ty: 'sh', ix: 1, ks: { a: 0, k: { i: [[-25,-25],[25,-25],[-25,25],[25,25]], o: [[25,-25],[-25,-25],[25,25],[-25,25]], v: [[-25,25],[25,25],[25,-25],[-25,-25]] }, ix: 2},\n            { ind: 1, ty: 'fl', ix: 2, c: { a: 0, k: [0.7,0.2,0.1,1], ix: 3}, o: { a: 0, k: 100, ix: 4}},\n            { ind: 2, ty: 'st', ix: 3, c: { a: 0, k: [0,0,0,1], ix: 5}, o: { a: 0, k: 100, ix: 6}, w: { a: 0, k: 2, ix: 7}, lc: 1, lj: 1, ml: 4}\n          ],\n          nm: 'Group 1', mn: 'ADBE Vector Group', hd: false\n        }\n      ],\n      ip: 0, op: 180, st: 0, bm: 0\n    }\n  ],\n  markers: []\n};\n\nfunction initLottieAnimation() {\n  const container = document.getElementById('lottie-container');\n  if (!container) {\n    console.error('Lottie container not found!');\n    return;\n  }\n\n  const anim = lottie.loadAnimation({\n    container: container,\n    renderer: 'svg', // Can be 'svg', 'canvas', or 'html'\n    loop: true,\n    autoplay: true,\n    animationData: animationData // Or use 'path: \"/path/to/animation.json\"'\n  });\n\n  // Optional: Control animation playback\n  container.addEventListener('mouseenter', () => anim.pause());\n  container.addEventListener('mouseleave', () => anim.play());\n}\n\ndocument.addEventListener('DOMContentLoaded', initLottieAnimation);\n\n// To make it runnable in a browser, you'd typically have this in an HTML file:\n/*\n<div id=\"lottie-container\" style=\"width: 300px; height: 300px; background-color: #f0f0f0; border: 1px solid #ccc;\"></div>\n<script type=\"module\" src=\"./main.js\"></script>\n*/","lang":"typescript","description":"This quickstart demonstrates how to import `lottie-web`, initialize an animation using inline JSON data, and attach basic play/pause controls on mouse events.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}