{"id":19226312,"url":"https://github.com/qonto/ember-lottie","last_synced_at":"2025-04-21T00:32:39.494Z","repository":{"id":43575914,"uuid":"511433198","full_name":"qonto/ember-lottie","owner":"qonto","description":"An Ember.js component to render lottie after effects animations.","archived":false,"fork":false,"pushed_at":"2025-01-20T15:24:19.000Z","size":5154,"stargazers_count":17,"open_issues_count":10,"forks_count":5,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-04-06T11:02:48.502Z","etag":null,"topics":["ember","ember-addon"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qonto.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-07-07T07:48:54.000Z","updated_at":"2024-09-17T12:44:55.000Z","dependencies_parsed_at":"2023-12-18T17:25:38.699Z","dependency_job_id":"dc89310d-f1b1-4fee-bc03-0f9f34717646","html_url":"https://github.com/qonto/ember-lottie","commit_stats":{"total_commits":39,"total_committers":9,"mean_commits":4.333333333333333,"dds":0.7435897435897436,"last_synced_commit":"cab23de80522e44a5964bc605d60adbe12db2d43"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qonto%2Fember-lottie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qonto%2Fember-lottie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qonto%2Fember-lottie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qonto%2Fember-lottie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qonto","download_url":"https://codeload.github.com/qonto/ember-lottie/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249980719,"owners_count":21355488,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ember","ember-addon"],"created_at":"2024-11-09T15:18:12.156Z","updated_at":"2025-04-21T00:32:39.174Z","avatar_url":"https://github.com/qonto.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![ember-lottie-illustration](https://user-images.githubusercontent.com/15218861/189691066-5fe5bb92-2451-4772-b3e6-978ac207bec2.svg)\n\n# ember-lottie\n\n![CI](https://github.com/qonto/ember-lottie/workflows/CI/badge.svg)\n[![Latest NPM release][npm-badge]][npm-badge-url]\n\n[npm-badge]: https://img.shields.io/npm/v/@qonto/ember-lottie.svg\n[npm-badge-url]: https://www.npmjs.com/package/@qonto/ember-lottie\n\nRender [lottie](https://github.com/airbnb/lottie-web) after effects animations in [Ember.js](https://emberjs.com).\n\n## Compatibility\n\n- Ember.js v3.28 or above\n- Ember CLI v3.28 or above\n- Node.js v18 or above\n- TypeScript v5 or above\n\n## Installation\n\n```\nember install @qonto/ember-lottie\n```\n\n## Usage\n\n```hbs\n\u003cLottie\n  @name=\"empty state\"\n  @animationData={{this.animationData}}\n  @path=\"/data.json\"\n  @loop={{false}}\n  @autoplay={{false}}\n  @speed={{500}}\n  @containerId={{this.id}}\n  @onDataReady={{this.args.onDataReady}}\n  @fetchOptions={{this.fetchOptions}}\n/\u003e\n```\n\n## API reference\n\n### Arguments\n\n| Argument      | Type     | Description                                                                                     |\n| ------------- | -------- | ----------------------------------------------------------------------------------------------- |\n| name          | string   | animation name for future reference                                                             |\n| animationData | object   | an object with the exported animation data (mandatory at least one: `animationData` or `path`)  |\n| path          | string   | the relative path to the animation object (mandatory at least one: `animationData` or `path`)   |\n| loop          | boolean  | by default at `true`, the animation runs forever, at `false`, the animation is played only once |\n| autoplay      | boolean  | by default to `true`, it will play as soon as it's loaded                                       |\n| speed         | number   | `1` is normal speed                                                                             |\n| containerId   | string   | the dom element id on which to render the animation (mandatory)                                 |\n| onDataReady   | function | a function that triggers the Lottie when you want it                                            |\n| onError       | function | a function that can be used as a callback when fetching the lottie file throws                  |\n| fetchOptions  | object   | any additional params to pass to fetch function (eg: `{credentials: \"include\"}`)                |\n\n## TypeScript usage\n\nThe `Lottie` component has proper [Glint](https://github.com/typed-ember/glint) types, which allow you to get strict type checking in your templates when using TypeScript.\n\nUnless you are using [strict mode](http://emberjs.github.io/rfcs/0496-handlebars-strict-mode.html) templates (via [first class component templates](http://emberjs.github.io/rfcs/0779-first-class-component-templates.html)),\nyou need to import the addon's Glint template registry entries as described in the [Using Addons](https://typed-ember.gitbook.io/glint/using-glint/ember/using-addons#using-glint-enabled-addons) documentation:\n\n```ts\n// e.g. types/glint.d.ts\nimport \"@glint/environment-ember-loose\";\nimport type LottieRegistry from \"@qonto/ember-lottie/template-registry\";\n\ndeclare module \"@glint/environment-ember-loose/registry\" {\n  export default interface Registry\n    extends LottieRegistry /* other addon registries */ {\n    // local entries\n  }\n}\n```\n\n## Contributing\n\nSee the [Contributing](CONTRIBUTING.md) guide for details.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE.md).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqonto%2Fember-lottie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqonto%2Fember-lottie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqonto%2Fember-lottie/lists"}