{"id":38212838,"url":"https://github.com/tsjdev-apps/lottieanimations-angular","last_synced_at":"2026-01-17T00:44:54.014Z","repository":{"id":229997764,"uuid":"778144309","full_name":"tsjdev-apps/lottieanimations-angular","owner":"tsjdev-apps","description":"About Sample repository to demonstrate how to add Lottie animation to an Angular project.","archived":false,"fork":false,"pushed_at":"2024-03-27T09:40:46.000Z","size":3406,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-03-28T09:52:28.532Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/tsjdev-apps.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"tsjdev-apps"}},"created_at":"2024-03-27T06:53:04.000Z","updated_at":"2024-03-27T07:53:04.000Z","dependencies_parsed_at":"2024-03-27T09:52:29.003Z","dependency_job_id":"78913bc2-7203-4d20-bdc3-7d0ef5ffd9d6","html_url":"https://github.com/tsjdev-apps/lottieanimations-angular","commit_stats":null,"previous_names":["tsjdev-apps/lottieanimations-angular"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tsjdev-apps/lottieanimations-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsjdev-apps%2Flottieanimations-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsjdev-apps%2Flottieanimations-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsjdev-apps%2Flottieanimations-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsjdev-apps%2Flottieanimations-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tsjdev-apps","download_url":"https://codeload.github.com/tsjdev-apps/lottieanimations-angular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tsjdev-apps%2Flottieanimations-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28490523,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T23:55:29.509Z","status":"ssl_error","status_checked_at":"2026-01-16T23:55:29.108Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2026-01-17T00:44:53.341Z","updated_at":"2026-01-17T00:44:54.007Z","avatar_url":"https://github.com/tsjdev-apps.png","language":"TypeScript","funding_links":["https://github.com/sponsors/tsjdev-apps"],"categories":[],"sub_categories":[],"readme":"# Use Lottie animations in your Angular project\n\n![Header](./docs/header.png)\n\n## Usage\n\nFirst you need to install the `npm` packages [lottie-web](https://www.npmjs.com/package/lottie-web) and [ngx-lottie](https://www.npmjs.com/package/ngx-lottie).\n\nRegister the needed stuff in the `app.config.ts` file:\n```typescript\nimport { provideCacheableAnimationLoader, provideLottieOptions } \n  from 'ngx-lottie';\nimport player \n  from 'lottie-web';\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideLottieOptions({ player: () =\u003e player }),\n    provideCacheableAnimationLoader(),\n    // \n  ]\n};\n```\n\nUse the `ng-lottie` tag in your `html` files:\n```HTML\n\u003cng-lottie \n    [options]=\"options\" \n    width=\"500px\" \n    height=\"500px\" \n    (animationCreated)=\"animationCreated($event)\" /\u003e\n```\n\nOpen the corresponding `TypeScript` file and adjust the code accordingly. First we need to add `LottieComponent` to the `imports` array in the `Component` decorator.\n\n```TypeScript\n@Component({\n    //\n  imports: [LottieComponent],\n    //\n})\n```\n\nAdd a reference to the `AnimationItem` and we define our `AnimationOptions`. These options contain the settings for the animation like the path or the setting if the animation should be played automatically or in a loop. Finally we add the `animationCreated` method to get access to the `AnimationItem`.\n\n```TypeScript\nprivate animationItem: AnimationItem | undefined;\n\noptions: AnimationOptions = {\n  path: '/assets/animations/globe.json',\n  loop: true,\n  autoplay: false\n};\n\nanimationCreated(animationItem: AnimationItem): void {\n  this.animationItem = animationItem;\n}\n```\n\nUse `this.animationItem` to start, pause or stop the animation accordingly. In my sample code, I'm using three buttons to control the animation.\n\n## Screenshots\n\nIf you run your Angular project, you will see the starting position of the animation, in my case a blue globe and the three buttons.\n\n![Screenshot](./docs/lottie-animations-angular-01.png)\n\nThe following GIF will show the website and also the animation in action.\n\n![Screenshot](./docs/lottie-animations-angular-02.gif)\n\n## Blog Post\n\nIf you are more interested into details, please see the following [medium.com](https://www.medium.com) post:\n\n- [Add Lottie animations to your Angular project](https://medium.com/medialesson/add-lottie-animations-to-your-angular-project-3e8f632d6212)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsjdev-apps%2Flottieanimations-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftsjdev-apps%2Flottieanimations-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftsjdev-apps%2Flottieanimations-angular/lists"}