{"id":13808149,"url":"https://github.com/filipows/angular-animations","last_synced_at":"2025-05-14T02:31:18.775Z","repository":{"id":30820089,"uuid":"125707383","full_name":"filipows/angular-animations","owner":"filipows","description":":sparkles: Easy, Reusable Animation Utility library for Angular","archived":false,"fork":false,"pushed_at":"2023-07-20T10:00:16.000Z","size":2374,"stargazers_count":610,"open_issues_count":66,"forks_count":86,"subscribers_count":19,"default_branch":"master","last_synced_at":"2024-04-24T09:17:05.858Z","etag":null,"topics":["angular","angular-animations","animation","hacktoberfest"],"latest_commit_sha":null,"homepage":"https://filipows.github.io/angular-animations","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/filipows.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":"2018-03-18T08:54:08.000Z","updated_at":"2024-06-03T13:48:50.485Z","dependencies_parsed_at":"2024-06-03T13:48:29.729Z","dependency_job_id":"e63939b6-1c92-4440-8ecb-81fcfa5b3657","html_url":"https://github.com/filipows/angular-animations","commit_stats":{"total_commits":142,"total_committers":8,"mean_commits":17.75,"dds":0.08450704225352113,"last_synced_commit":"2f422109da32e8089f1807679eaeea36588bf115"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipows%2Fangular-animations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipows%2Fangular-animations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipows%2Fangular-animations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/filipows%2Fangular-animations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/filipows","download_url":"https://codeload.github.com/filipows/angular-animations/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273219,"owners_count":17448071,"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","angular-animations","animation","hacktoberfest"],"created_at":"2024-08-04T01:01:36.024Z","updated_at":"2024-11-19T00:30:35.339Z","avatar_url":"https://github.com/filipows.png","language":"TypeScript","readme":"# Angular-Animations Utility Library\n\n[![npm version](https://badge.fury.io/js/angular-animations.svg)](https://www.npmjs.com/package/angular-animations)\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)\n[![Gitter chat](https://badges.gitter.im/angular-animations.png)](https://gitter.im/angular-animations/Lobby)\n[![Code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\nEasy, Reusable Animation Utility library for Angular Apps.\n\nAngular Animations utility library is a collection of reusable and parametrized animations build for Angular 15+ that can be used in a declarative manner. It implements all animations from [animate.css](https://daneden.github.io/animate.css/) (and more). Works both with AOT and JIT compilations.\n\n### Quick links\n\n[Demo](https://filipows.github.io/angular-animations/) |\n[StackBlitz Demo](https://stackblitz.com/edit/angular-animations-lib-demo) |\n[StackBlitz Base Template](https://stackblitz.com/edit/angular-animations-lib-base-template)\n\n### Table of Contents\n\n- [Getting Started](#getting-started)\n - [Prerequisites](#prerequisites)\n- [Installation](#installation)\n- [Usage](#usage)\n - [Animations `on enter` / `on leave`](#animations-on-enter--on-leave)\n - [Animations with state or triggered by state changes](#animations-with-state-or-triggered-by-state-changes)\n - [Parametrized animations](#parametrized-animations)\n - [Animation Callbacks](#animation-callbacks)\n - [Loop animation](#loop-animation)\n - [Chain animations](#chain-animations)\n- [Available Animations and Parameters](#available-animations-and-parameters)\n- [Running Demo App](#running-demo-app)\n- [Authors](#authors)\n- [License](#license)\n\n## Getting Started\n\n### Prerequisites\n\nMake sure you import `BrowserAnimationModule` in your angular app.\n\n```bash\n npm i @angular/animations@latest --save\n```\n\nImport `BrowserAnimationsModule` from `@angular/platform-browser/animations` in your root NgModule\n\n```ts\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\n```\n\n```ts\n@NgModule({\n declarations: [\n ...\n ],\n imports: [\n ...\n BrowserAnimationsModule\n ],\n})\nexport class AppModule { }\n```\n\n## Installation\n\n```bash\n npm i angular-animations --save\n```\n\n## Usage\n\n### Animations `on enter` / `on leave`\n\nAnimations on enter / on leave are triggered in a moment when element is added to or removed from the dom.\nBasic example would be with `*ngIf` template directive.\n\nImport animation functions that you want to use and add them to `animations` in a component decorator:\n\n```ts\nimport { fadeInOnEnterAnimation, fadeOutOnLeaveAnimation } from 'angular-animations';\n\n@Component({\n selector: '...',\n templateUrl: '...',\n styleUrls: ['...'],\n animations: [\n fadeInOnEnterAnimation(),\n fadeOutOnLeaveAnimation()\n ]\n})\n```\n\nand use them in the template:\n\n```html\n\u003cdiv *ngIf=\"CONDITION\" [@fadeInOnEnter] [@fadeOutOnLeave]\u003e\u003c/div\u003e\n```\n\n### Animations with state or triggered by state changes\n\nThese animations take as an input a boolean value. Some animations, like Attention Seekers are triggered depending on the `direction` parameter; bidirectional (`\u003c=\u003e`) will be triggered by any state change, unidirectional (`=\u003e`) will be triggered only when state changes from false to true.\n\nAll `in` and `out` animations are triggered by changes of state from `false` to `true`. Animations that preserve state, like `collapse` or `rotate` display default state when the value is `false` and transition to end state when the value is `true`\n\n```ts\nimport { collapseAnimation, rubberBandAnimation } from 'angular-animations';\n\n@Component({\n ...\n animations: [\n rubberBandAnimation(),\n collapseAnimation(),\n ]\n})\n```\n\n```html\n\u003cdiv [@rubberBand]=\"rubberState\"\u003e\u003c/div\u003e\n\u003cdiv [@collapse]=\"collapseState\"\u003e\u003c/div\u003e\n```\n\n### Parametrized animations\n\nAll animations are open for customizations. All of them have parameters: `duration` and `delay`, and if it make sense for an animation, additional ones: `translate`, `degrees` or `scale`.\n\nParameters can be used either in a component decorator or dynamically in a template.\n\nIn a decorator:\n\n```ts\n@Component({\n ...\n animations: [\n fadeInUpOnEnterAnimation({ anchor: 'enter', duration: 1000, delay: 100, translate: '30px' }),\n bounceOutDownOnLeaveAnimation({ anchor: 'leave', duration: 500, delay: 200, translate: '40px' })\n ]\n})\n```\n\n```html\n\u003cdiv *ngIf=\"CONDITION\" [@enter] [@leave]\u003e\u003c/div\u003e\n```\n\nAnimations like Attention Seekers can take a direction parameter (cannot be in template)\n\n```ts\n@Component({\n ...\n animations: [\n // triggers when STATE changes from false to true\n rubberBandAnimation({anchor: 'rubber', direction: '=\u003e', duration: 500})\n ]\n})\n```\n\n```html\n\u003cdiv [@rubber]=\"STATE\"\u003e\u003c/div\u003e\n```\n\nIn a template (providing option for dynamic changes):\n\n```ts\n@Component({\n ...\n animations: [\n fadeInUpOnEnterAnimation({ anchor: 'enter'),\n ]\n})\n```\n\n```html\n\u003cdiv *ngIf=\"CONDITION\" [@enter]=\"{ value: '', params: { duration: 300, delay: 0, translate: '30px' } }\" [@leave]\u003e\u003c/div\u003e\n\u003cdiv *ngIf=\"CONDITION\" [@enter]=\"{ value: '', params: { duration: 300, delay: 100, translate: '40px } }\" [@leave]\u003e\u003c/div\u003e\n```\n\nWith parameters in a template, we can for example achieve staggering animations:\n\n```html\n\u003cdiv *ngFor=\"let i of [1,2,3]\" [@enter]=\"{ value: '', params: { delay: i * 100 } }\"\u003e\u003c/div\u003e\n```\n\n### Animation Callbacks\n\nEach animation supports `start` and `done` callbacks to setup hook methods that get called at the start or end of animations.\nWe can add callbacks with the syntax `(@trigger.start)` or `(@trigger.done)`, where `trigger` is the name of the animation trigger/anchor being used.\n\n```html\n\u003cdiv [@fadeIn]=\"animationState\" (@fadeIn.start)=\"animStart($event)\" (@fadeIn.done)=\"animDone($event)\"\u003e\u003c/div\u003e\n```\n\nThe callbacks receive an `AnimationEvent` that contains the following properties: `fromState` `phaseName`(\"start\" or \"done\"), `toState` and `totalTime`\n\n```ts\nimport { AnimationEvent } from '@angular/animations';\n\n//...\n\nanimStart(event: AnimationEvent) {\n console.log('Animation Started', event);\n}\n\nanimDone(event: AnimationEvent) {\n console.log('Animation Ended', event);\n}\n```\n\nYou can find more information about Animation callbacks in the [Angular docs](https://angular.io/guide/transition-and-triggers#animation-callbacks)\n\n#### Loop animation\n\nYou can achieve looped animation by using `done` callback. Define a variable that triggers animation and toggle it when animation done callback is called:\n\n```html\n\u003cdiv [@bounce]=\"animState\" (@bounce.done)=\"animDone()\"\u003e\u003c/div\u003e\n```\n\nand in the component:\n\n```ts\n animState = false;\n\n animDone() {\n this.animState = !this.animState\n }\n```\n\n[Example: simple infinite loop animation](https://stackblitz.com/edit/angular-animations-lib-simple-loop?file=src/app/demo-main/demo-main.component.html) \u003cbr /\u003e\n[Example: repeat animation N times after clicking the button](https://stackblitz.com/edit/angular-animations-lib-simple-loop-repeat-n-times?file=src/app/demo-main/demo-main.component.html)\u003cbr /\u003e\n[Example: repeat animation until certain event occurs](https://stackblitz.com/edit/angular-animations-lib-simple-loop-repeat-until-btn-click?file=src/app/demo-main/demo-main.component.html)\n\n#### Chain animations\n\nYou can chain animations (e.g. wait for the first animation to finish before the second one starts) by using the `done` callback.\n[Example: OnEnter/OnLeave chained animations](https://stackblitz.com/edit/angular-animations-lib-chained-on-enter?file=src/app/demo-main/demo-main.component.html)\n\n## Available Animations and Parameters\n\nAll animations have `duration` and `delay` params.\n\n| | Animation | Default Anchor | OnEnter/OnLeave | Additional Params |\n| ------------------ | ------------------ | -------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |\n| Attention Seekers | | | | |\n| | bounce | `[@bounce]` | `[@bounceOnEnter]` | |\n| | flash | `[@flash]` | `[@flashOnEnter]` | |\n| | pulse | `[@pulse]` | `[@pulseOnEnter]` | `scale` (default: 1.05) |\n| | rubberBand | `[@rubberBand]` | `[@rubberBandOnEnter]` | |\n| | shake | `[@shake]` | `[@shakeOnEnter]` | `translate` (default: '10px') |\n| | swing | `[@swing]` | `[@swingOnEnter]` | |\n| | tada | `[@tada]` | `[@tadaOnEnter]` | |\n| | wobble | `[@wobble]` | `[@wobbleOnEnter]` | |\n| | jello | `[@jello]` | `[@jelloOnEnter]` | |\n| | heartBeat | `[@heartBeat]` | `[@heartBeatOnEnter]` | `scale` (default: 1.3) |\n| | headShake | `[@headShake]` | `[@headShakeOnEnter]` | |\n| Bouncing entrances | | | | |\n| | bounceIn | `[@bounceIn]` | `[@bounceInOnEnter]` | |\n| | bounceInDown | `[@bounceInDown]` | `[@bounceInDownOnEnter]` | `translate` (default: '3000px') |\n| | bounceInLeft | `[@bounceInLeft]` | `[@bounceInLeftOnEnter]` | `translate` (default: '3000px') |\n| | bounceInRight | `[@bounceInRight]` | `[@bounceInRightOnEnter]` | `translate` (default: '3000px') |\n| | bounceInUp | `[@bounceInUp]` | `[@bounceInUpOnEnter]` | `translate` (default: '3000px') |\n| Bouncing exits | | | | |\n| | bounceOut | `[@bounceOut]` | `[@bounceOutOnLeave]` | |\n| | bounceOutDown | `[@bounceOutDown]` | `[@bounceOutDownOnLeave]` | `translate` (default: '2000px') |\n| | bounceOutLeft | `[@bounceOutLeft]` | `[@bounceOutLeftOnLeave]` | `translate` (default: '2000px') |\n| | bounceOutRight | `[@bounceOutRight]` | `[@bounceOutRightOnLeave]` | `translate` (default: '2000px') |\n| | bounceOutUp | `[@bounceOutUp]` | `[@bounceOutUpOnLeave]` | `translate` (default: '2000px') |\n| Fading entrances | | | | |\n| | fadeIn | `[@fadeIn]` | `[@fadeInOnEnter]` | |\n| | fadeInDown | `[@fadeInDown]` | `[@fadeInDownOnEnter]` | `translate` (default: '100%') |\n| | fadeInDownBig | `[@fadeInDownBig]` | `[@fadeInDownBigOnEnter]` | `translate` (default: '2000px') |\n| | fadeInLeft | `[@fadeInLeft]` | `[@fadeInLeftOnEnter]` | `translate` (default: '100%') |\n| | fadeInLeftBig | `[@fadeInLeftBig]` | `[@fadeInLeftBigOnEnter]` | `translate` (default: '2000px') |\n| | fadeInRight | `[@fadeInRight]` | `[@fadeInRightOnEnter]` | `translate` (default: '100%') |\n| | fadeInRightBig | `[@fadeInRightBig]` | `[@fadeInRightBigOnEnter]` | `translate` (default: '2000px') |\n| | fadeInUp | `[@fadeInUp]` | `[@fadeInUpOnEnter]` | `translate` (default: '100%') |\n| | fadeInUpBig | `[@fadeInUpBig]` | `[@fadeInUpBigOnEnter]` | `translate` (default: '2000px') |\n| Fading exits | | | | |\n| | fadeOut | `[@fadeOut]` | `[@fadeOutOnLeave]` | |\n| | fadeOutDown | `[@fadeOutDown]` | `[@fadeOutDownOnLeave]` | `translate` (default: '100%') |\n| | fadeOutDownBig | `[@fadeOutDownBig]` | `[@fadeOutDownBigOnLeave]` | `translate` (default: '2000px') |\n| | fadeOutLeft | `[@fadeOutLeft]` | `[@fadeOutLeftOnLeave]` | `translate` (default: '100%') |\n| | fadeOutLeftBig | `[@fadeOutLeftBig]` | `[@fadeOutLeftBigOnLeave]` | `translate` (default: '2000px') |\n| | fadeOutRight | `[@fadeOutRight]` | `[@fadeOutRightOnLeave]` | `translate` (default: '100%') |\n| | fadeOutRightBig | `[@fadeOutRightBig]` | `[@fadeOutRightBigOnLeave]` | `translate` (default: '2000px') |\n| | fadeOutUp | `[@fadeOutUp]` | `[@fadeOutUpOnLeave]` | `translate` (default: '100%') |\n| | fadeOutUpBig | `[@fadeOutUpBig]` | `[@fadeOutUpBigOnLeave]` | `translate` (default: '2000px') |\n| Flippers | | | | |\n| | flip | `[@flip]` | `[@flipOnEnter]` | |\n| | flipInX | `[@flipInX]` | `[@flipInXOnEnter]` | `degrees` (default: 90) |\n| | flipInY | `[@flipInY]` | `[@flipInYOnEnter]` | `degrees` (default: 90) |\n| | flipOutX | `[@flipOutX]` | `[@flipOutXOnLeave]` | `degrees` (default: 90) |\n| | flipOutY | `[@flipOutY]` | `[@flipOutYOnLeave]` | `degrees` (default: 90) |\n| Light speed | | | | |\n| | lightSpeedIn | `[@lightSpeedIn]` | `[@lightSpeedInOnEnter]` | `translate` (default: '100%') |\n| | lightSpeedOut | `[@lightSpeedOut]` | `[@lightSpeedOutOnLeave]` | `translate` (default: '100%') |\n| Rotating entrances | | | | |\n| | rotateIn | `[@rotateIn]` | `[@rotateInOnEnter]` | `degrees` (default: -200) |\n| | rotateInDownLeft | `[@rotateInDownLeft]` | `[@rotateInDownLeftOnEnter]` | `degrees` (default: -45) |\n| | rotateInDownRight | `[@rotateInDownRight]` | `[@rotateInDownRightOnEnter]` | `degrees` (default: 45) |\n| | rotateInUpLeft | `[@rotateInUpLeft]` | `[@rotateInUpLeftOnEnter]` | `degrees` (default: 45) |\n| | rotateInUpRight | `[@rotateInUpRight]` | `[@rotateInUpRightOnEnter]` | `degrees` (default: -90) |\n| Rotating exits | | | | |\n| | rotateOut | `[@rotateOut]` | `[@rotateOutOnLeave]` | `degrees` (default: 200) |\n| | rotateOutDownLeft | `[@rotateOutDownLeft]` | `[@rotateOutDownLeftOnLeave]` | `degrees` (default: 45) |\n| | rotateOutDownRight | `[@rotateOutDownRight]` | `[@rotateOutDownRightOnLeave]` | `degrees` (default: -45) |\n| | rotateOutUpLeft | `[@rotateOutUpLeft]` | `[@rotateOutUpLeftOnLeave]` | `degrees` (default: -45) |\n| | rotateOutUpRight | `[@rotateOutUpRight]` | `[@rotateOutUpRightOnLeave]` | `degrees` (default: -90) |\n| Sliding entrances | | | | |\n| | slideInUp | `[@slideInUp]` | `[@slideInUpOnEnter]` | `translate` (default: '100%') |\n| | slideInDown | `[@slideInDown]` | `[@slideInDownOnEnter]` | `translate` (default: '100%') |\n| | slideInLeft | `[@slideInLeft]` | `[@slideInLeftOnEnter]` | `translate` (default: '100%') |\n| | slideInRight | `[@slideInRight]` | `[@slideInRightOnEnter]` | `translate` (default: '100%') |\n| Sliding exits | | | | |\n| | slideOutUp | `[@slideOutUp]` | `[@slideOutUpOnLeave]` | `translate` (default: '100%') |\n| | slideOutDown | `[@slideOutDown]` | `[@slideOutDownOnLeave]` | `translate` (default: '100%') |\n| | slideOutLeft | `[@slideOutLeft]` | `[@slideOutLeftOnLeave]` | `translate` (default: '100%') |\n| | slideOutRight | `[@slideOutRight]` | `[@slideOutRightOnLeave]` | `translate` (default: '100%') |\n| Zooming entrances | | | | |\n| | zoomIn | `[@zoomIn]` | `[@zoomInOnEnter]` | |\n| | zoomInDown | `[@zoomInDown]` | `[@zoomInDownOnEnter]` | |\n| | zoomInLeft | `[@zoomInLeft]` | `[@zoomInLeftOnEnter]` | |\n| | zoomInRight | `[@zoomInRight]` | `[@zoomInRightOnEnter]` | |\n| | zoomInUp | `[@zoomInUp]` | `[@zoomInUpOnEnter]` | |\n| Zooming exits | | | | |\n| | zoomOut | `[@zoomOut]` | `[@zoomOutOnLeave]` | |\n| | zoomOutDown | `[@zoomOutDown]` | `[@zoomOutDownOnLeave]` | |\n| | zoomOutLeft | `[@zoomOutLeft]` | `[@zoomOutLeftOnLeave]` | |\n| | zoomOutRight | `[@zoomOutRight]` | `[@zoomOutRightOnLeave]` | |\n| | zoomOutUp | `[@zoomOutUp]` | `[@zoomOutUpOnLeave]` | |\n| Specials | | | | |\n| | hinge | `[@hinge]` | `[@hingeOnLeave]` | |\n| | jackInTheBox | `[@jackInTheBox]` | `[@jackInTheBoxOnEnter]` | |\n| | rollIn | `[@rollIn]` | `[@rollInOnEnter]` | `degrees` (default: -120), `translate` (default: '-100%') |\n| | rollOut | `[@rollOut]` | `[@rollOutOnLeave]` | `degrees` (default: 120), `translate` (default: '100%') |\n| Other | | | | |\n| | collapse | `[@collapse]` \u003cbr\u003e `[@collapseHorizontally]` | `[@expandOnEnter]` \u003cbr\u003e `[@collapseOnLeave]` \u003cbr\u003e `[@fadeInExpandOnEnter]`\u003cbr\u003e `[@fadeOutCollapseOnLeave]` \u003cbr\u003e `[@expandRightOnEnter]` \u003cbr\u003e `[@collapseLeftOnLeave]` \u003cbr\u003e `[@fadeInExpandRightOnEnter]`\u003cbr\u003e `[@fadeOutCollapseLeftOnLeave]` | |\n| | rotate | `[@rotate]` | `-` | `degrees` (default: 90) |\n| | hueRotate | `[@hueRotate]` | `-` | |\n\n## Running Demo App\n\n```\nnpm install\nnpm start\n```\n\n## Authors\n\n- **Chris Filipowski** - [filipows](https://github.com/filipows)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details\n","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilipows%2Fangular-animations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffilipows%2Fangular-animations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffilipows%2Fangular-animations/lists"}