{"_id":"@advanced-astro/lottie","_rev":"5-0f0b27fa9f224c4d5db5474fbb0487d3","name":"@advanced-astro/lottie","dist-tags":{"beta":"1.0.0-beta.2","latest":"0.2.0"},"versions":{"1.0.0-beta.1":{"name":"@advanced-astro/lottie","version":"1.0.0-beta.1","description":"Use Lottie animations within your Astro website","keywords":["astro","astro-integration","astro-component","lottie"],"homepage":"https://github.com/advanced-astro/astro-lottie#readme.md","bugs":{"url":"https://github.com/advanced-astro/astro-lottie/issues"},"repository":{"type":"git","url":"git+https://github.com/advanced-astro/astro-lottie.git"},"license":"MIT","author":{"name":"Marc Redwerkz","url":"https://github.com/advanced-astro"},"type":"module","module":"./dist/index.js","types":"./dist/index.d.ts","scripts":{"build":"tsc","lint":"biome check src"},"devDependencies":{"@types/node":"^20.12.7","astro":"^4.6.1","lottie-web":"^5.12.2","typescript":"^5.4.5"},"peerDependencies":{"lottie-web":"^5.12.2"},"_id":"@advanced-astro/lottie@1.0.0-beta.1","gitHead":"dfa01feba566420e015b0f12af789025621f9df9","_nodeVersion":"20.12.1","_npmVersion":"10.5.1","dist":{"integrity":"sha512-dLL+w57zCcQnz1lN2hum147v5RxeUzWWKYuGrWJPyt3oqo56tjxWqBaQ/N/g7wTRiUuz8zRUBIhQieVnjhTMMg==","shasum":"3608f1dbda9c97c625c5c8ea6136c381f16a2b9a","tarball":"https://registry.npmjs.org/@advanced-astro/lottie/-/lottie-1.0.0-beta.1.tgz","fileCount":13,"unpackedSize":15862,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC91oKo0JAwZlZAVhSMfPlSwJDf8Jm/sz7Cky0lE9qoywIhAJSaKNq097G+m0DNILoJMQzeMUVcZp+dUw2GKsssbzsW"}]},"_npmUser":{"name":"redwerkz","email":"yred@tuta.io"},"directories":{},"maintainers":[{"name":"redwerkz","email":"yred@tuta.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lottie_1.0.0-beta.1_1712966303620_0.7097559309478698"},"_hasShrinkwrap":false},"1.0.0-beta.2":{"name":"@advanced-astro/lottie","version":"1.0.0-beta.2","description":"Use Lottie animations within your Astro website","keywords":["astro","astro-integration","astro-component","lottie"],"homepage":"https://github.com/advanced-astro/astro-lottie#readme.md","bugs":{"url":"https://github.com/advanced-astro/astro-lottie/issues"},"repository":{"type":"git","url":"git+https://github.com/advanced-astro/astro-lottie.git"},"license":"MIT","author":{"name":"Marc Redwerkz","url":"https://github.com/advanced-astro"},"type":"module","module":"./dist/index.js","types":"./dist/index.d.ts","scripts":{"build":"tsc"},"dependencies":{"lottie-web":"^5.12.2"},"devDependencies":{"@types/node":"^20.12.7","astro":"^4.6.1","typescript":"^5.4.5"},"peerDependencies":{"lottie-web":"^5.12.2"},"_id":"@advanced-astro/lottie@1.0.0-beta.2","readme":"# Astro Lottie\n\nUse [Lottie](https://github.com/airbnb/lottie-web) animations within your [Astro](https://astro.build) website.\n\n## Installation\n\n**@advanced-astro/lottie** requires **lottie-web** to be installed as well.\n\n```sh\nbun i @advanced-astro/lottie lottie-web\n# or\nnpm i @advanced-astro/lottie lottie-web\n# or\npnpm i @advanced-astro/lottie lottie-web\n# or\nyarn add @advanced-astro/lottie lottie-web\n```\n\n## Usage\n\n### Integration\n\nRequired first step: add the integration to your `astro.config` file.\n\n```ts\nimport { defineConfig } from \"astro/config\";\nimport lottie from \"@advanced-astro/lottie\";\n\nexport default defineConfig({\n  integrations: [\n    lottie(), // <-- add integration\n  ]\n});\n```\n\n### Type support\n\nThis integration defines the `astroLottie` global object to interact with your animations inside a page.\nDetails on the [dedicated section](#accessing-the-lottie-player).\nYou can have full type info of the `astroLottie` object with an environment reference.\n\nCreate an `env.d.ts` or, if you already have one, add the following line:\n\n```ts\n/// <reference types=\"@advanced-astro/lottie/env\" />\n```\n\n### Component\n\nInside your astro page or component, you can import the Lottie component.\nIt supports props autocompletion and type checking.\n\n```astro\n---\nimport LottieAnimation from \"@advanced-astro/lottie/Lottie.astro\";\n---\n<div class=\"container\">\n  <LottieAnimation src=\"assets/animation.json\" autoplay=\"visible\" />\n</div>\n```\n\n### Styling, sizing and constraints\n\nYou can use a parent `div` as a container to set the size and set additional styling (background, ...).\n\nYou can either use the `style` attribute or reference a css `class`.\n\n```html\n<!-- with css class -->\n<div class=\"container\">\n    <LottieAnimation src=\"assets/animation.json\" autoplay=\"visible\" />\n</div>\n\n\n<!-- or style -->\n<div style=\"width: 200px; height: 150px;\">\n    <LottieAnimation src=\"assets/animation.json\" autoplay=\"visible\" />\n</div>\n```\n\n## How `Astro Lottie` works\n\n### Player loading\n\nThe lottie player is not bundled within your page. It's asynchronously fetched only when a page contains at least one lottie animation.\n\nThis package allows to load two players:\n\n- `light`: small player with only svg rendering\n- `full`: all featured player, with all capabilities\n\nYou can read more about lottie players in the [Lottie repository](https://github.com/airbnb/lottie-web).\n\nWhen a page contains multiple animations with different players specified, the _greater_ player will be loaded. So to load the light player, all animation musts set the `player=\"light\"` (or no player at all, as the default one is the `\"light\"`).\n\nThe lottie player is locally saved in the public folder (it's handled under the hood by astro/vite) so no external request is sent.\n\n### Animation loading\n\nThe lottie animations are not bundled in your page. They're asynchronously fetched when the page loading ends, when a small loader script is run.\n\nThe loader will\n\n- check if the page has any lottie animations\n- fetch the lottie player\n- download the animations (if one is used multiple times, it's downloaded once)\n- setup each the animation on the page\n- if the autoplay is `true`, the animation is started right away, otherwise the animation will play only when it's visible and paused when it exits the screen. This is achieved thanks to `IntersectionObserver`, with a visibility filter 0.01.\n- raise a document event `astro-lottie-loaded` when all animations are loaded and ready\n\n### Accessing the Lottie Player\n\nThis plugin registers a `astroLottie` global object for the page.\n\n```ts\nconst astroLottie = window.astroLottie;\nif (!astroLottie) {\n  // lottie is not registered! Either ...\n  // - no lottie animation is present on this page\n  // - lottie library failed to load\n} else {\n  const animation = astroLottie.getAnimation(\"my-animation\");\n  animation.player.play();\n}\n```\n\nThe `AstroLottie` has two features:\n\n- getting a specific animation by a key\n- getting all animations present in the page\n\nThe full specification is:\n\n```ts\nexport type AstroLottie = {\n    /**\n     * Get a LottieAnimation by the configured id\n     */\n    getAnimation(id: string): LottieAnimation | undefined\n\n    /**\n     * Get a LottieAnimation from the hosting element container\n     */\n    getAnimation(from: { container: HTMLElement }): LottieAnimation | undefined\n\n    /**\n     * Get a LottieAnimation from the hosting element container\n     */\n    getAnimation(from: { elementId: string }): LottieAnimation | undefined\n\n    /**\n     * Get all the LottieAnimation for the current page\n     */\n    getAllAnimations(): LottieAnimation[]\n}\n```\n\nA `LottieAnimation` represents a single animation registered for the current page and is defined with:\n\n```ts\nexport type LottieAnimation = Readonly<{\n    id: string                        // the specified id es: <Lottie id=\"my-animation\" />\n    config: LottieAnimationConfig     // the full lottie configuration of the Lottie element\n    container: HTMLElement            // the hosting dom element container\n    isLoaded: boolean                 // specify if the animation is successfully loaded\n    player?: AnimationItem            // this is the real Lottie player. It's defined when isLoaded is true\n}>\n```\n\nThe `player` property is the Lottie player, typed by the Lottie library itself.\nYou can checkout [Lottie](https://github.com/airbnb/lottie-web#usage) repository for the documentation.\n\nFor example if you need to start an animation on demand when a button is clicked.\n\n```ts\ndocument.querySelector(\"#play-button\").addEventListener(\"click\", () => {\n  const animation = astroLottie.getAnimation(\"my-animation\");\n  if (animation && animation.isLoaded) {\n    animation.player.play();\n  }\n});\n```\n\n### Animation ready event\n\nThe loader emit a document event `astro-lottie-loaded` when all animations are loaded and ready.\nThe `details` property of the event, is the `astroLottie` global object.\n\n```ts\ndocument.addEventListener(\"astro-lottie-loaded\", e => {\n  const astroLottie = e.details;\n  const animations = astroLottie.getAllAnimations();\n});\n```\n\n## Reference\n\n### LottieAnimationConfig --> the Lottie component Props\n\n| property | type                  | usage    | description                              |\n|:---------|:----------------------|:---------|:-----------------------------------------|\n| id       | `string`              | optional | used to access the relative lottie player via javascript |\n| src      | `string`              | required | the public path from where the animation will be downloaded |\n| player   | `\"light\"` \\| `\"full\"`  | optional(`\"light\"`)    | which lottie player to load |\n| loop     | `boolean`             | optional(`true`)      | play the animation on loop |\n| autoplay | `true` \\| `\"visible\"` | optional(`\"visible\"`) | starts the animation as soon it loads or only when it's visible on the page |\n| visibleThreshold | `number` | optional(`0`) | Range[0-1] for the visibility to start the animation: 1 means 100% visible, 0 means that just 1px will make the animation play. When multiple animations on the same page use different thresholds, the minimum will be used for all |\n\n## Types\n\nThis package is built in typescript so it has full typings support.\n\n## License\n\n[MIT](LICENSE.txt) © [Marc Redwerkz](https://github.com/rdwz) [Giuseppe La Torre](https://github.com/giuseppelt)\n","readmeFilename":"README.md","gitHead":"dfa01feba566420e015b0f12af789025621f9df9","_nodeVersion":"20.12.1","_npmVersion":"10.5.1","dist":{"integrity":"sha512-CNJrFjMaaJHv/DPlV4rh6tHqG1RNhxRpfCHxC2UuM+4o+M/W5dqwcJR0nN9JELjwQkzFxp85+UF4Erk1XKvy+w==","shasum":"6bda5beb341e1d9fbfe184d1ce9650e85d16e097","tarball":"https://registry.npmjs.org/@advanced-astro/lottie/-/lottie-1.0.0-beta.2.tgz","fileCount":13,"unpackedSize":15941,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFbU6GcBzE5T4qcDyO7XFF97BMJkWoZNxGZqP6lm/oYAiB5fiGOvjk5TbZIlUdLup2RWU2T1TeYZiBf6bzbOcUDjA=="}]},"_npmUser":{"name":"redwerkz","email":"yred@tuta.io"},"directories":{},"maintainers":[{"name":"redwerkz","email":"yred@tuta.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lottie_1.0.0-beta.2_1712967054085_0.20090022677729835"},"_hasShrinkwrap":false},"0.1.0":{"name":"@advanced-astro/lottie","version":"0.1.0","description":"Astro integration and component for Lottie animations","type":"module","module":"./dist/index.js","types":"./dist/index.d.ts","scripts":{"build":"tsc"},"keywords":["astro","astro-integration","astro-component","lottie"],"author":{"name":"Marc Redwerkz","url":"https://github.com/rdwz"},"license":"MIT","homepage":"https://advanced-astro.dev","bugs":{"url":"https://github.com/advanced-astro/astro-lottie/issues"},"repository":{"type":"git","url":"git+https://github.com/advanced-astro/astro-lottie.git"},"exports":{".":"./src/index.ts"},"devDependencies":{"astro":"^4.6.1","typescript":"^5.4.5","@types/node":"^20.12.7"},"peerDependencies":{"astro":">=4.0.0","lottie-web":"^5.12.2"},"_id":"@advanced-astro/lottie@0.1.0","gitHead":"d7d80806e0140f567eab1bcb4237f5550da5b2c4","_nodeVersion":"20.12.2","_npmVersion":"10.5.0","dist":{"integrity":"sha512-Ba/LpSa+cQ2Gk40YQ5mx2eRPPiEEk3EI/eaLuIyv4LaA/mms5nACXpPhNA0vJTqCiJcfQoZ/x3ZXxX4b3yJMjA==","shasum":"52055550ef3f3455b47776efac61c6ad8da5d8db","tarball":"https://registry.npmjs.org/@advanced-astro/lottie/-/lottie-0.1.0.tgz","fileCount":10,"unpackedSize":13932,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzixlvfb05QoBKRZPi3oVn4p1MtSB2clktr5LVo31rDAIgS+19YccrKTHLy+yw8jikD7Uj4kCAD3HAF/bcfBO1NFc="}]},"_npmUser":{"name":"redwerkz","email":"yred@tuta.io"},"directories":{},"maintainers":[{"name":"redwerkz","email":"yred@tuta.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lottie_0.1.0_1713242471190_0.7631223961554439"},"_hasShrinkwrap":false},"0.1.1":{"name":"@advanced-astro/lottie","version":"0.1.1","description":"Use Lottie animations within your Astro website","type":"module","module":"./dist/index.js","types":"./dist/index.d.ts","scripts":{"build":"tsc"},"keywords":["astro","astro-integration","astro-component","lottie"],"contributors":[{"name":"Marc Redwerkz","url":"https://github.com/rdwz"}],"author":{"name":"Giuseppe La Torre","url":"https://github.com/giuseppelt"},"license":"MIT","homepage":"https://github.com/rdwz/astro-lottie#readme.md","bugs":{"url":"https://github.com/rdwz/astro-lottie/issues"},"repository":{"type":"git","url":"git+https://github.com/rdwz/astro-lottie.git"},"devDependencies":{"@types/node":"^20.12.7","astro":"^4.6.3","lottie-web":"^5.12.2","typescript":"^5.4.5"},"peerDependencies":{"lottie-web":"^5.12.2"},"workspaces":["src","demo"],"_id":"@advanced-astro/lottie@0.1.1","gitHead":"dfa01feba566420e015b0f12af789025621f9df9","_nodeVersion":"20.12.2","_npmVersion":"10.5.2","dist":{"integrity":"sha512-b/RQGaSWbIwE+FV/i3qyamh2z5pCqae0sxKdQtCz1XNrs+8nN5sfpkhv3wI2rBf+Aq59ibmVtW2vtPPE5v2ZiA==","shasum":"b03810b21d660bde8f447459362139d114c75f1f","tarball":"https://registry.npmjs.org/@advanced-astro/lottie/-/lottie-0.1.1.tgz","fileCount":11,"unpackedSize":7238,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDOGYU7TaWgBqp59sYnRUBl71PmvhG5kq6h9AdBQpna7AiBBuzgwoQq1ywnoKJeWhhvX/9rcbu1htltikbgt6d7rCA=="}]},"_npmUser":{"name":"redwerkz","email":"yred@tuta.io"},"directories":{},"maintainers":[{"name":"redwerkz","email":"yred@tuta.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lottie_0.1.1_1713526346117_0.258458497664134"},"_hasShrinkwrap":false},"0.1.2":{"name":"@advanced-astro/lottie","version":"0.1.2","description":"Use Lottie animations within your Astro website","keywords":["astro","astro-integration","astro-component","lottie"],"homepage":"https://github.com/advanced-astro/lottie#readme.md","bugs":{"url":"https://github.com/advanced-astro/lottie/issues"},"repository":{"type":"git","url":"git+https://github.com/advanced-astro/lottie.git"},"license":"MIT","author":{"name":"Giuseppe La Torre","url":"https://github.com/giuseppelt"},"contributors":[{"name":"Marc Redwerkz","url":"https://github.com/rdwz"}],"type":"module","module":"./dist/index.js","types":"./dist/index.d.ts","workspaces":["src","demo"],"scripts":{"build":"tsc"},"devDependencies":{"@types/node":"^20.12.7","astro":"^4.6.3","lottie-web":"^5.12.2","typescript":"^5.4.5"},"peerDependencies":{"lottie-web":"^5.12.2"},"_id":"@advanced-astro/lottie@0.1.2","gitHead":"dfa01feba566420e015b0f12af789025621f9df9","_nodeVersion":"20.12.2","_npmVersion":"10.5.2","dist":{"integrity":"sha512-Htoa5BVLQ4bVtSO9zdeDVIHyxt/E4JmausQThvntryWbM7vOkTV729yW2pajkgWGzXpEDB0Vr9CkVHzgBUs3JA==","shasum":"3e94235003cf1699280b377672af98f2a3e7f9b5","tarball":"https://registry.npmjs.org/@advanced-astro/lottie/-/lottie-0.1.2.tgz","fileCount":12,"unpackedSize":14488,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDRNeEYLqg8vP0dID34pHLAgn3po50Ey41gSjKAtLl6QIgRtHIW/xwMwyzSTjZeRyMbYK9APERVpGTe0LzSU9WsiM="}]},"_npmUser":{"name":"redwerkz","email":"yred@tuta.io"},"directories":{},"maintainers":[{"name":"redwerkz","email":"yred@tuta.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lottie_0.1.2_1713527286782_0.3872715862860745"},"_hasShrinkwrap":false},"0.2.0":{"name":"@advanced-astro/lottie","version":"0.2.0","description":"The next level 🔥 experience of Astro 🚀 in a frenzy of Lottie wizardry 🪄","keywords":["astro","astro-integration","astro-component","lottie"],"homepage":"https://github.com/advanced-astro/lottie#readme.md","bugs":{"url":"https://github.com/advanced-astro/lottie/issues"},"repository":{"type":"git","url":"git+https://github.com/advanced-astro/lottie.git"},"license":"MIT","author":{"name":"Giuseppe La Torre","url":"https://github.com/giuseppelt"},"contributors":[{"name":"Marc Redwerkz","url":"https://github.com/rdwz"}],"type":"module","module":"./dist/index.js","types":"./dist/index.d.ts","scripts":{"build":"tsc","build:tsup":"tsup"},"devDependencies":{"@types/node":"^20.12.7","astro":"^4.6.3","lottie-web":"^5.12.2","typescript":"^5.4.5"},"peerDependencies":{"lottie-web":"^5.10.0"},"_id":"@advanced-astro/lottie@0.2.0","gitHead":"193844122abcab38dabda49caa96e93d7263d410","_nodeVersion":"20.12.2","_npmVersion":"10.5.2","dist":{"integrity":"sha512-WGMweSUe01WCtVT4U8vroyryD0U8pNpA7MD2LcN0G1x8Dn1XXa4qXswC+OjB9pE9rLPZRRFFxqXirWVsphUGkw==","shasum":"6521d93927a9cbbcf73765fda98d085ed2b91fc7","tarball":"https://registry.npmjs.org/@advanced-astro/lottie/-/lottie-0.2.0.tgz","fileCount":13,"unpackedSize":15837,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZLRtETEQgVwjmk7hsnIeT6ddlga1P0PjCVzE1QfOVWAiEAzZU7omhojG9Kke/12Nz8iCduKHESsjCIU6ff4Ypxxc8="}]},"_npmUser":{"name":"redwerkz","email":"yred@tuta.io"},"directories":{},"maintainers":[{"name":"redwerkz","email":"yred@tuta.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/lottie_0.2.0_1713582843760_0.677564678567999"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-12T23:58:23.489Z","1.0.0-beta.1":"2024-04-12T23:58:23.762Z","modified":"2024-04-20T03:14:04.164Z","1.0.0-beta.2":"2024-04-13T00:10:54.240Z","0.1.0":"2024-04-16T04:41:11.368Z","0.1.1":"2024-04-19T11:32:26.257Z","0.1.2":"2024-04-19T11:48:06.919Z","0.2.0":"2024-04-20T03:14:03.956Z"},"maintainers":[{"name":"redwerkz","email":"yred@tuta.io"}],"description":"The next level 🔥 experience of Astro 🚀 in a frenzy of Lottie wizardry 🪄","homepage":"https://github.com/advanced-astro/lottie#readme.md","keywords":["astro","astro-integration","astro-component","lottie"],"repository":{"type":"git","url":"git+https://github.com/advanced-astro/lottie.git"},"author":{"name":"Giuseppe La Torre","url":"https://github.com/giuseppelt"},"bugs":{"url":"https://github.com/advanced-astro/lottie/issues"},"license":"MIT","readme":"# Astro × Lottie\n\nThe next level 🔥 experience of Astro 🚀 in a frenzy of Lottie wizardry 🪄\n\n## Getting started 🎯\n\n```sh\n(bunx|npx|pnpx) astro add @advanced-astro/lottie\n```\n\n### Manual Installation 🧑‍💻\n\n**@advanced-astro/lottie** requires **lottie-web** to be installed as well\n\n```sh\n(bun|npm|pnpm) i @advanced-astro/lottie lottie-web\n```\n\nAdd it to your `astro.config` integrations list\n\n```ts\nimport { defineConfig } from \"astro/config\";\nimport lottie from \"@advanced-astro/lottie\";\n\nexport default defineConfig({\n  integrations: [\n    lottie(), // <-- now you're ready!\n  ]\n});\n```\n\n### Type support 🏷️\n\nThis integration defines the `astroLottie` global object to interact with your animations inside a page.\nDetails on the [dedicated section](#accessing-the-lottie-player).\nYou can have full type info of the `astroLottie` object with an environment reference.\n\nCreate an `env.d.ts` or, if you already have one, add the following line:\n\n```ts\n/// <reference types=\"@advanced-astro/lottie/env\" />\n```\n\n### Component 🧩\n\nInside your astro page or component, you can import the Lottie component.\nIt supports props autocompletion and type checking.\n\n```astro\n---\nimport Lottie from \"@advanced-astro/lottie/Lottie.astro\";\n---\n<div class=\"container\">\n    <Lottie src=\"assets/animation.json\" />\n</div>\n```\n\n### Styling, sizing and constraints\n\nYou can use a parent `div` as a container to set the size and set additional styling (background, ...).\n\nYou can either use the `style` attribute or reference a css `class`.\n\n```html\n<!-- with css class -->\n<div class=\"container\">\n    <Lottie src=\"assets/animation.json\" />\n</div>\n\n<!-- or style -->\n<div style=\"height: 256px; width: 256px;\">\n    <Lottie src=\"assets/animation.json\"  />\n</div>\n```\n\n## How `Astro Lottie` works\n\n### Player loading\n\nThe lottie player is not bundled within your page.\nIt's asynchronously fetched only when a page contains at least one lottie animation.\n\nThis package allows to load two players:\n\n- `light`: small player with only svg rendering\n- `full`: all featured player, with all capabilities\n\nYou can read more about lottie players in the [Lottie repository](https://github.com/airbnb/lottie-web).\n\nWhen a page contains multiple animations with different players specified, the _greater_ player will be loaded.\nSo to load the light player, all animation musts set the `player=\"light\"` (or no player at all, as the default one is the `\"light\"`).\n\nThe lottie player is locally saved in the public folder (it's handled under the hood by astro/vite) so no external request is sent.\n\n### Animation loading\n\nThe lottie animations are not bundled in your page.\nThey're asynchronously fetched when the page loading ends, when a small loader script is run.\n\nThe loader will\n\n- check if the page has any lottie animations\n- fetch the lottie player\n- download the animations (if one is used multiple times, it's downloaded once)\n- setup each the animation on the page\n- if the autoplay is `true`, the animation is started right away, otherwise the animation will play only when it's visible and paused when it exits the screen.\nThis is achieved thanks to `IntersectionObserver`, with a visibility filter 0.01.\n- raise a document event `astro-lottie-loaded` when all animations are loaded and ready\n\n### Accessing the Lottie Player\n\nThis plugin registers a `astroLottie` global object for the page.\n\n```ts\nconst astroLottie = window.astroLottie;\nif (!astroLottie) {\n  // lottie is not registered! Either ...\n  // - no lottie animation is present on this page\n  // - lottie library failed to load\n} else {\n  const animation = astroLottie.getAnimation(\"my-animation\");\n  animation.player.play();\n}\n```\n\nThe `AstroLottie` has two features:\n\n- getting a specific animation by a key\n- getting all animations present in the page\n\nThe full specification is:\n\n```ts\nexport type AstroLottie = {\n    /**\n     * Get animation by the configured id\n     */\n    getAnimation(id: string): Lottie | undefined\n\n    /**\n     * Get animation from the hosting element container\n     */\n    getAnimation(from: { container: HTMLElement }): Lottie | undefined\n\n    /**\n     * Get animation from the hosting element container\n     */\n    getAnimation(from: { elementId: string }): Lottie | undefined\n\n    /**\n     * Get all animations for the current page\n     */\n    getAllAnimations(): Lottie[]\n}\n```\n\n`Lottie` represents a single animation registered for the current page and is defined with:\n\n```ts\nexport type Lottie = Readonly<{\n  id: string             // the specified id es: <Lottie id=\"my-animation\" />\n  config: LottieConfig   // the full lottie configuration of the Lottie element\n  container: HTMLElement // the hosting dom element container\n  isLoaded: boolean      // specify if the animation is successfully loaded\n  player?: AnimationItem // this is the real Lottie player. It's defined when isLoaded is true\n}>\n```\n\nThe `player` property is the Lottie player, typed by the Lottie library itself.\nYou can checkout [Lottie](https://github.com/airbnb/lottie-web#usage) repository for the documentation.\n\nFor example if you need to start an animation on demand when a button is clicked.\n\n```ts\ndocument.querySelector(\"#play-button\").addEventListener(\"click\", () => {\n  const animation = astroLottie.getAnimation(\"my-animation\");\n  if (animation && animation.isLoaded) {\n    animation.player.play();\n  }\n});\n```\n\n### Animation ready event\n\nThe loader emit a document event `astro-lottie-loaded` when all animations are loaded and ready.\nThe `details` property of the event, is the `astroLottie` global object.\n\n```ts\ndocument.addEventListener(\"astro-lottie-loaded\", e => {\n  const astroLottie = e.details;\n  const animations = astroLottie.getAllAnimations();\n});\n```\n\n## Reference\n\n### LottieConfig --> the Lottie component Props\n\n| property | type                  | usage                 | description                                      |\n|:---------|:----------------------|:----------------------|:-------------------------------------------------|\n| id       | `string`              | optional              | access the relative lottie player via javascript |\n| src      | `string`              | required              | path from where the animation will be downloaded |\n| player   | `\"light\"` \\| `\"full\"` | optional(`\"light\"`)   | which lottie player to load                      |\n| loop     | `boolean`             | optional(`true`)      | play the animation on loop                       |\n| autoplay | `true` \\| `\"visible\"` | optional(`\"visible\"`) | start as soon it loads or only when it's visible |\n| visibleThreshold | `number` | optional(`0`) | Range[0-1] for the visibility to start the animation: 1 means 100% visible, 0 means that just 1px will make the animation play. When multiple animations on the same page use different thresholds, the minimum will be used for all |\n\n## Tech Stack\n\n- [Astro][astro]\n- [Lottie][lottie]\n- [Typescript][ts]\n\n## License \n\n[MIT](LICENSE.md) © 2024 [Marc Redwerkz][rdwz], © 2022 [Giuseppe La Torre][giuseppelt]\n\n[astro]: https://astro.build\n[lottie]: https://airbnb.io/lottie\n[ts]: https://www.typescriptlang.org/\n[rdwz]: https://github.com/rdwz\n[giuseppelt]: https://github.com/giuseppelt\n","readmeFilename":"README.md","contributors":[{"name":"Marc Redwerkz","url":"https://github.com/rdwz"}]}