{"id":13481349,"url":"https://github.com/jiayihu/ng-animate","last_synced_at":"2025-05-15T03:04:23.468Z","repository":{"id":23404717,"uuid":"98632034","full_name":"jiayihu/ng-animate","owner":"jiayihu","description":"🌙 A collection of cool, reusable and flexible animations for Angular 14+","archived":false,"fork":false,"pushed_at":"2023-02-04T14:08:14.000Z","size":5367,"stargazers_count":721,"open_issues_count":17,"forks_count":72,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-04-14T00:59:45.311Z","etag":null,"topics":["angular","animations"],"latest_commit_sha":null,"homepage":"https://jiayihu.github.io/ng-animate/","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/jiayihu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-28T09:13:12.000Z","updated_at":"2025-04-10T14:10:34.000Z","dependencies_parsed_at":"2023-02-18T17:01:18.613Z","dependency_job_id":null,"html_url":"https://github.com/jiayihu/ng-animate","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiayihu%2Fng-animate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiayihu%2Fng-animate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiayihu%2Fng-animate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jiayihu%2Fng-animate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jiayihu","download_url":"https://codeload.github.com/jiayihu/ng-animate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248804790,"owners_count":21164132,"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","animations"],"created_at":"2024-07-31T17:00:51.097Z","updated_at":"2025-04-14T00:59:58.006Z","avatar_url":"https://github.com/jiayihu.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"readme":"# 🌙 ng-animate\n\n[![npm](https://img.shields.io/npm/v/ng-animate.svg)](https://www.npmjs.com/package/ng-animate)\n\n`ng-animate` is a collection of cool, reusable and flexible animations for Angular. It implements all the animations in [animate.css](https://daneden.github.io/animate.css/), but with the power and flexibility of [Angular animations](https://angular.io/guide/animations) instead of CSS.\n\n## Demo\n\nThe demo of the animations is available at [https://jiayihu.github.io/ng-animate/](https://jiayihu.github.io/ng-animate/).\n\n## Usage\n\n```\nnpm install ng-animate --save\n```\n\n## Example\n\nImport the animation from the package and pass it to your Angular component using [useAnimation](https://angular.io/api/animations/useAnimation):\n\n```javascript\n// my-component.component.ts\nimport { trigger, transition, useAnimation } from '@angular/animations';\nimport { bounce } from 'ng-animate';\n\n@Component({\n  selector: 'my-component',\n  templateUrl: 'my-component.component.html',\n  animations: [\n    trigger('bounce', [transition('* =\u003e *', useAnimation(bounce))])\n  ],\n})\nexport class MyComponent {\n  bounce: any;\n}\n```\n\n```html\n\u003c!-- my-component.component.html --\u003e\n\u003cdiv [@bounce]=\"bounce\"\u003e\u003c/div\u003e\n```\n\n**Note**: Make sure to have included `BrowserAnimationsModule` in your `AppModule` and the [web-animation.js](https://github.com/web-animations/web-animations-js) polyfill.\n\nIt's also possible to import only a subset of the animations:\n\n```javascript\nimport { bounce } from 'ng-animate/lib/bouncing';\n```\n\n### Animation params\n\n**All the animations** provided by `ng-animate` support at least two **optional** params `timing` and `delay` to specify the animation duration and delay. Default value for `timing` is usually `1`s and `0`s for `delay`.  \nYou can pass the `params` object using the Javascript API or within the component template:\n\n```javascript\n@Component({\n  selector: 'my-component',\n  templateUrl: 'my-component.component.html',\n  animations: [\n    trigger('bounce', [transition('* =\u003e *', useAnimation(bounce, {\n      // Set the duration to 5seconds and delay to 2seconds\n      params: { timing: 5, delay: 2 }\n    }))])\n  ],\n})\nexport class MyComponent {}\n```\n\nUsing a template can achieve the same result, but you'll have access to the component context:\n\n```html\n\u003cdiv [@bounce]=\"{ value: bounce, params: { timing: myTiming || 5, delay: myDelay || 2 } }\"\u003e\u003c/div\u003e\n```\n\n## Animations\n\nAll the animations are organized by their group. Many of them have additional params other than `timing/delay`: refer to [Advanced Usage](#advanced-params) for more details. Nevertheless you can probably ignore them if you're happy with how they are by default.\n\n### Attention seekers\n\n- `bounce`\n- `flash`\n- `pulse`\n- `rubberBand`\n- `shakeX`\n- `shakeY`\n- `headShake`\n- `swing`\n- `tada`\n- `wobble`\n- `jello`\n- `heartBeat`\n\n### Back\n\n- `backInDown`\n- `backInLeft`\n- `backInRight`\n- `backInUp`\n\u003c!-- --\u003e\n- `backOutDown`\n- `backOutLeft`\n- `backOutRight`\n- `backOutUp`\n\n### Bouncing\n\n- `bounceIn`\n- `bounceOut`. Additional param: `scale`\n\nThe following bouncing animations have additional params `a, b, c, d` for `translate`\n\n- `bounceInDown`\n- `bounceInLeft`\n- `bounceInRight`\n- `bounceInUp`\n\u003c!-- --\u003e\n- `bounceOutDown`\n- `bounceOutLeft`\n- `bounceOutRight`\n- `bounceOutUp`\n\n### Fading\n\nAll fading animations have additional params `fromOpacity`, `toOpacity` for `opacity` transition and `a, b` for `translate`.\n\n- `fadeIn`\n- `fadeInDown`\n- `fadeInLeft`\n- `fadeInRight`\n- `fadeInUp`\n\u003c!-- --\u003e\n- `fadeInDownBig`\n- `fadeInLeftBig`\n- `fadeInRightBig`\n- `fadeInUpBig`\n\u003c!-- --\u003e\n- `fadeOut`\n- `fadeOutDown`\n- `fadeOutLeft`\n- `fadeOutRight`\n- `fadeOutUp`\n\u003c!-- --\u003e\n- `fadeOutDownBig`\n- `fadeOutLeftBig`\n- `fadeOutRightBig`\n- `fadeOutUpBig`\n\nThe following fading animations do not have `a, b` for `translate` but `fromX`,`fromY`,`toX`,`toY` instead.\n\n- `fadeInTopLeft`\n- `fadeInTopRight`\n- `fadeInBottomLeft`\n- `fadeInBottomRight`\n\u003c!-- --\u003e\n- `fadeOutTopLeft`\n- `fadeOutTopRight`\n- `fadeOutBottomLeft`\n- `fadeOutBottomRight`\n\n\n### Sliding\n\nSliding animations are basically fading animations without a change of `opacity`. They can also receive the same params.\n\n- `slideInDown`\n- `slideInLeft`\n- `slideInRight`\n- `slideInUp`\n- `slideOutDown`\n- `slideOutLeft`\n- `slideOutRight`\n- `slideOutUp`\n\n### Flippers\n\n- `flip`\n- `flipInX`\n- `flipInY`\n- `flipOutX`\n- `flipOutY`\n\n### LightSpeed\n\n- `lightSpeedIn`\n- `lightSpeedLeft`\n- `lightSpeedIn`\n- `lightSpeedOut`\n- `lightSpeedOutRight` (same as `lightSpeedOut`)\n- `lightSpeedOutLeft`\n\n### Rotating\n\nAll rotating animations have additional params `fromOpacity`, `toOpacity` for `opacity` transition, `origin` for `transform-origin` and `degrees` for `rotate3d`.\n\n- `rotateIn`\n- `rotateInDownLeft`\n- `rotateInDownRight`\n- `rotateInUpLeft`\n- `rotateInUpRight`\n- `rotateOut`\n- `rotateOutDownLeft`\n- `rotateOutDownRight`\n- `rotateOutUpLeft`\n- `rotateOutUpRight`\n\n### Specials\n\n- `jackInTheBox`\n- `hinge`\n- `rollIn`\n- `rollOut`\n\n### Zooming\n\n- `zoomIn`\n- `zoomOut`\n\nThe following zooming animations have additional params `a, b` for `translate`\n\n- `zoomInDown`\n- `zoomInLeft`\n- `zoomInRight`\n- `zoomInUp`\n\u003c!-- --\u003e\n- `zoomOutDown`\n- `zoomOutLeft`\n- `zoomOutRight`\n- `zoomOutUp`\n\n## Advanced params\n\nMany of the animations support also other params like `scale`, `fromOpacity`, `toOpacity` and much more, allowing extremely flexible usage and customization if you're not happy with default values. \n\nSingle letters like `a, b, c, d` are used for the steps of some animations: `a` is the starting value, `d` is the ending.  \nThe animated property they refer to depends on the animation and the direction: usually `translate` on axis Y from `-Down/-Up`, axis X for `-Left/-Right`.\n\n```javascript\nuseAnimation(bounceInDown, {\n  params: {\n    timing: 5,\n\n    // Specify granular values for `translate` on axis Y during 'bounceInDown' \n    a: '-3000px',\n    b: '25px',\n    c: '-10px',\n    d: '5px',\n  }\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjiayihu%2Fng-animate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjiayihu%2Fng-animate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjiayihu%2Fng-animate/lists"}