{"id":20532530,"url":"https://github.com/synapsium/ngx-lottie","last_synced_at":"2026-05-18T09:07:07.686Z","repository":{"id":38806932,"uuid":"163890692","full_name":"Synapsium/ngx-lottie","owner":"Synapsium","description":"High quality animation library natively on web based on After Effect redering","archived":false,"fork":false,"pushed_at":"2023-01-04T20:36:45.000Z","size":3821,"stargazers_count":1,"open_issues_count":25,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-16T14:51:08.668Z","etag":null,"topics":["angular","lottie"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Synapsium.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-02T21:19:24.000Z","updated_at":"2020-04-22T04:17:02.000Z","dependencies_parsed_at":"2023-02-02T20:30:49.979Z","dependency_job_id":null,"html_url":"https://github.com/Synapsium/ngx-lottie","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Synapsium%2Fngx-lottie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Synapsium%2Fngx-lottie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Synapsium%2Fngx-lottie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Synapsium%2Fngx-lottie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Synapsium","download_url":"https://codeload.github.com/Synapsium/ngx-lottie/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242138805,"owners_count":20078007,"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":["angular","lottie"],"created_at":"2024-11-16T00:15:23.353Z","updated_at":"2026-05-18T09:07:07.615Z","avatar_url":"https://github.com/Synapsium.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg height=\"200px\" width=\"200px\"  src=\"http://airbnb.io/lottie/images/Introduction_00_sm.gif\"\u003e\n  \u003ca href=\"https://synapsium.com\"\u003e\n    \u003ch1 align=\"center\"\u003engx-lottie\u003c/h1\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nQuickly way to integrate \u003ca href=\"http://airbnb.io/lottie/\"\u003eLottie-web\u003c/a\u003e component with \u003ca href=\"https://angular.io/\"\u003eAngular\u003c/a\u003e\n\u003c/p\u003e\n\n# Lottie\n\nLottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!\nView documentation, FAQ, help, examples, and more at \u003ca href=\"http://airbnb.io/lottie/\"\u003ehere\u003c/a\u003e.\n\n## Setup\n\n### Installation\n\nInstall `lottie-web` and `ngx-lottie` library from `npm`\n\n```bash\nnpm install lottie-web @synapsium/ngx-lottie --save\n```\n\n### Module usage\nAdd `lottie.min.js` into angular.json\n\n```javascript\n\"scripts\": [\n    \"node_modules/lottie-web/build/player/lottie.min.js\"\n]\n```\n\nAdd `LottieModule` to module\n\n```javascript\nimport { LottieModule } from '@synapsium/ngx-lottie';\n\n\n@NgModule({\n  ...\n  imports: [\n    ...\n    LottieModule\n  ]\n})\n```\n\n## How to use\n\nAdd the following tag in your html :\n```html\n\u003clottie [path]=\"assets/home.json\" \n        [loop]=\"true\" animationEvent=\"click\"\u003e\n\u003c/lottie\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsynapsium%2Fngx-lottie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsynapsium%2Fngx-lottie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsynapsium%2Fngx-lottie/lists"}