# @anglr/animations > Angular module storing ready animations Latest version **11.1.1** (published 2026-05-15) · MIT license · 0 weekly downloads ## Install ```sh npm install @anglr/animations pnpm add @anglr/animations yarn add @anglr/animations bun add @anglr/animations ``` ## Health **Score 55/100 (C)** — status: active. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. ## Facts | | | |---|---| | Version | 11.1.1 | | Published | 2026-05-15 | | First published | 2019-12-20 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM | | Node | ^20.19.0 \|\| ^22.12.0 \|\| >=24.0.0 | | Dependencies | 3 | | Unpacked size | 180.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 0 | | Author | kukjevov | | Maintainers | kukjevov, vinckobb | | Keywords | animations, angular, ng | ## Links - npm: https://www.npmjs.com/package/@anglr/animations - Repository: https://github.com/ressurectit/ng-animations - Issues: https://github.com/ressurectit/ng-animations/issues - npm.io page: https://npm.io/package/@anglr/animations ## Dependencies (3) - [tslib](https://npm.io/package/tslib.md) ^2.8.1 - [@angular/core](https://npm.io/package/@angular/core.md) >=20.2.0 - [@jscrpt/common](https://npm.io/package/@jscrpt/common.md) >=7.1.0 ## Alternatives - [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads - [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads - [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads - [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads - [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads ## Recent versions - 11.1.1 (latest) — 2026-05-15 - 11.1.1-beta.20260515073854 (next) — 2026-05-15 - 11.1.0 — 2025-09-25 - 11.1.0-beta.20250925125834 — 2025-09-25 - 11.1.0-beta.20250925125728 — 2025-09-25 - 11.0.0 — 2025-08-25 - 11.0.0-beta.20250825065747 — 2025-08-25 - 11.0.0-beta.20250825062742 — 2025-08-25 - 10.1.0 — 2024-05-15 - 10.1.0-beta.20240515064852 — 2024-05-15 - 10.1.0-beta.20240515063315 — 2024-05-15 - 10.0.0 — 2023-11-09 - 10.0.0-beta.20231109095802 — 2023-11-09 - 10.0.0-beta.20231103082827 — 2023-11-03 - 10.0.0-beta.20231103070020 — 2023-11-03 - … 19 more at https://npm.io/package/@anglr/animations/versions ## README [![npm version](https://badge.fury.io/js/%40anglr%2Fanimations.svg)](https://badge.fury.io/js/%40anglr%2Fanimations) [![Build status](https://ci.appveyor.com/api/projects/status/6v3560ee6yo3lj6l?svg=true)](https://ci.appveyor.com/project/kukjevov/ng-animations) # @anglr/animations Angular library providing ready-to-use animated components and animation directives. It includes animated icon components with CSS-based animations and a directive for enabling enter/leave animations on dynamically created components. ## Installation ```bash npm install @anglr/animations ``` ### Peer Dependencies - `@angular/core` >= 20.2.0 - `@jscrpt/common` >= 7.1.0 - `tslib` ^2.8.1 ## Features - **Animated icon components** – standalone components with pure CSS animations - **AnimateDirective** – declarative enter/leave animations for dynamically created elements - **Standalone** – all components and directives are standalone, no module import needed - **OnPush** – all components use `ChangeDetectionStrategy.OnPush` ## Usage ### AnimateDirective Directive used for enabling enter/leave animations on elements (best suited for dynamically created components). ```typescript import {AnimateDirective} from '@anglr/animations'; @Component( { imports: [AnimateDirective], template: `
Content with enter/leave animations
`, }) export class MyComponent {} ``` #### Inputs | Input | Type | Default | Description | |-------|------|---------|-------------| | `enterAnimation` | `string \| string[]` | `[]` | Name or names of animations used when the element enters | | `leaveAnimation` | `string \| string[]` | `[]` | Name or names of animations used when the element leaves | You can pass multiple animation names as an array: ```html
``` #### Dynamic component usage You can attach `AnimateDirective` to a dynamically created component using the `directives` option of `createComponent`. This enables enter/leave animations on a component that has no animation logic of its own. First, define a simple component with no animation: ```typescript import {Component, ChangeDetectionStrategy} from '@angular/core'; @Component( { selector: 'simple-dynamic', template: `
I am a dynamically created component with no animation logic!
`, changeDetection: ChangeDetectionStrategy.OnPush, }) export class SimpleDynamicComponent { } ``` Then create it dynamically with `AnimateDirective` attached via the `directives` property: ```typescript import {Component, ChangeDetectionStrategy, ViewContainerRef, ComponentRef, viewChild} from '@angular/core'; import {AnimateDirective} from '@anglr/animations'; import {SimpleDynamicComponent} from './simpleDynamic.component'; @Component( { selector: 'dynamic-sample-view', template: ` `, changeDetection: ChangeDetectionStrategy.OnPush, }) export class DynamicSampleComponent { private _componentRef: ComponentRef | null = null; protected container = viewChild.required('container', {read: ViewContainerRef}); public create(): void { if(this._componentRef) { return; } this._componentRef = this.container().createComponent(SimpleDynamicComponent, { directives: [ { type: AnimateDirective, bindings: [ inputBinding('enterAnimation', () => 'fade-in'), inputBinding('leaveAnimation', () => 'fade-out'), ], }, ], }); } public destroy(): void { if(!this._componentRef) { return; } this._componentRef.destroy(); this._componentRef = null; } } ``` --- ### DoubleRightIconSAComponent An animated double-right chevron icon. Plays a sliding animation on click (`mouseup`). ```typescript import {DoubleRightIconSAComponent} from '@anglr/animations'; @Component( { imports: [DoubleRightIconSAComponent], template: ` `, }) export class MyComponent {} ``` The icon size scales with `font-size` (uses `em` units). Customize it via CSS: ```css .double-right-icon { font-size: 24px; color: #333; } ``` --- ### UpDownCaretIconComponent An animated caret (chevron) icon that toggles between up and down states with a 3D rotation transition. ```typescript import {UpDownCaretIconComponent} from '@anglr/animations'; @Component( { imports: [UpDownCaretIconComponent], template: ` `, }) export class MyComponent { protected isClosed = true; } ``` #### Model | Model | Type | Default | Description | |-------|------|---------|-------------| | `closed` | `boolean` | `true` | Whether the caret is in the closed (down) state. Toggles on click. | Styling example: ```css .up-down-caret-icon { font-size: 16px; color: #666; cursor: pointer; } ``` ## Building ```bash npm run build ``` ## Linting ```bash npm run lint ``` ## License [MIT](LICENSE) --- _Source: https://npm.io/package/@anglr/animations · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._