{"id":13808156,"url":"https://github.com/williamjuan027/angular-animations-explorer","last_synced_at":"2025-04-05T03:06:49.343Z","repository":{"id":40613908,"uuid":"272575125","full_name":"williamjuan027/angular-animations-explorer","owner":"williamjuan027","description":"🧸  A resource to showcase the different animations that you could do with Angular","archived":false,"fork":false,"pushed_at":"2025-01-12T02:02:24.000Z","size":17816,"stargazers_count":141,"open_issues_count":1,"forks_count":31,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T02:03:56.206Z","etag":null,"topics":["angular","animation"],"latest_commit_sha":null,"homepage":"http://williamjuan027.github.io/angular-animations-explorer/","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/williamjuan027.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,"publiccode":null,"codemeta":null}},"created_at":"2020-06-16T00:48:50.000Z","updated_at":"2025-02-17T09:11:01.000Z","dependencies_parsed_at":"2024-08-04T01:08:36.011Z","dependency_job_id":"405e9cdf-9e2e-4835-b1cc-d96bc3833e91","html_url":"https://github.com/williamjuan027/angular-animations-explorer","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/williamjuan027%2Fangular-animations-explorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamjuan027%2Fangular-animations-explorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamjuan027%2Fangular-animations-explorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/williamjuan027%2Fangular-animations-explorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/williamjuan027","download_url":"https://codeload.github.com/williamjuan027/angular-animations-explorer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247280263,"owners_count":20912967,"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","animation"],"created_at":"2024-08-04T01:01:36.219Z","updated_at":"2025-04-05T03:06:49.321Z","avatar_url":"https://github.com/williamjuan027.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Animations"],"readme":"# Angular Animations Explorer\n\n\u003e 🚀 A resource showcasing the different animations techniques you can use in an Angular application.\n\n[![MIT](https://img.shields.io/packagist/l/doctrine/orm.svg?style=for-the-badge)]()\n[![PRs](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge)]()\n[![Angular](https://img.shields.io/badge/Angular-19-DE0031.svg?style=for-the-badge)](https://github.com/angular/angular)\n[![social](https://img.shields.io/twitter/follow/williamjuan27?color=%23249FEC\u0026label=follow%20me\u0026logo=twitter\u0026style=for-the-badge)](https://twitter.com/williamjuan27)\n\n![Hero image](src/assets/images/github-hero.png)\n\nThis project started as a demo for [In-Depth guide into Animations in Angular](https://indepth.dev/in-depth-guide-into-animations-in-angular) blogpost on **indepth.dev**, with the goal of providing a live version of all the techniques covered in the article that you could explore and play around with. \n\nOver time, the project grew beyond the article, showcasing even more animation techniques you can use in your Angular applications - including new features of Angular's animations module and other animation libraries.\n\nIt is broken down into different sections, each section covering a set of related techniques (i.e. Angular Animations, third-party library animations) along with a live demo that you can play with. Some of the demos have the same animation written in different ways. This is done intentionally to showcase how the different ways are reflected both visually on the UI and how the browser interprets the code.\n\n\u003e This is not meant to be as comprehensive or a replacement for [Angular's official documentation](https://angular.io/guide/animations), but rather a quick way to showcase the different animation methods that are available, look at their behavior, some use cases, and the code behind the implementation.\n\nIf you find this helpful, bookmark it, star it on [Github](https://github.com/williamjuan027/angular-animations-explorer), or share it on [Twitter](https://twitter.com/intent/tweet?text=Explore%20the%20different%20ways%20to%20animate%20your%20Angular%20Apps%20by%20%40williamjuan27%20%23angular%20%23javascript%20%23webdev%0Ahttps%3A%2F%2Fwilliamjuan027.github.io%2Fangular-animations-explorer) 😀\n\nHave any questions or want to see a different kind of animation, let me know - open an [issue on the repo](https://github.com/williamjuan027/angular-animations-explorer/issues) or tweet me at [@williamjuan27](https://twitter.com/Williamjuan27)\n\n**Enjoy :)**\n\n## Build Setup\n\n```bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:4200\nnpm run start\n\n# build for production\nnpm run build\n```\n\n## Folder Structure\n\nThere are 2 main folders that contains the bulk of the content in the application.\n\n- **Content**: All the content you see on the application are written in markdown located in [`src/assets/post-content/`](src/assets/post-content) in their respective folders.\n- **Demo**: For posts that contains a demo component, these components are located in [`src/app/content/content-components`](src/app/content/content-components/).\n\n## Have any questions or want to see an animation in Angular not included here?\n\nTweet me at [@williamjuan27](https://twitter.com/Williamjuan27) or open an issue in this repo.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilliamjuan027%2Fangular-animations-explorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwilliamjuan027%2Fangular-animations-explorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilliamjuan027%2Fangular-animations-explorer/lists"}