{"id":16052200,"url":"https://github.com/penguin-32/asa","last_synced_at":"2026-05-08T13:35:55.484Z","repository":{"id":65502457,"uuid":"593531000","full_name":"Penguin-32/asa","owner":"Penguin-32","description":"Angular Scroll Animations - Angular library for automatic element animations.","archived":false,"fork":false,"pushed_at":"2023-04-27T15:21:34.000Z","size":1199,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-11T16:42:17.931Z","etag":null,"topics":["angular","animation","library","npm-package","package","scroll"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Penguin-32.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"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":"2023-01-26T08:32:37.000Z","updated_at":"2023-04-27T11:34:29.000Z","dependencies_parsed_at":"2024-10-30T23:11:42.201Z","dependency_job_id":null,"html_url":"https://github.com/Penguin-32/asa","commit_stats":{"total_commits":43,"total_committers":2,"mean_commits":21.5,"dds":0.06976744186046513,"last_synced_commit":"7e4149d9134bde09bbce9e3139f9deff1b6c0ca1"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Penguin-32%2Fasa","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Penguin-32%2Fasa/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Penguin-32%2Fasa/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Penguin-32%2Fasa/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Penguin-32","download_url":"https://codeload.github.com/Penguin-32/asa/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247301257,"owners_count":20916476,"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","library","npm-package","package","scroll"],"created_at":"2024-10-09T01:07:59.600Z","updated_at":"2026-05-08T13:35:55.260Z","avatar_url":"https://github.com/Penguin-32.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ASA - Angular Scroll Animations\n\nVersatile library to easily animate elements as user scrolls down the page.\n\n## Installation\n\n- With NPM:\n```bash\nnpm install @penguin32/asa --save\n```\n\n- With Yarn:\n```bash\nyarn add @penguin32/asa\n```\n\nin your Angular project.\n\n## Usage\n\n- Import the `AsaModule` and `BrowserAnimationsModule`/`NoopAnimationsModule` into the module wherever you want to use it:\n\n```typescript\nimport {AsaModule} from '@penguin32/asa';\nimport {BrowserAnimationsModule} from \"@angular/platform-browser/animations\";\n\n@NgModule({\n  imports: [\n    // ...\n    AsaModule,\n    BrowserAnimationsModule,\n  ]\n})\nexport class AppModule {\n}\n```\n\n### Using included animations\nThis library comes with a handful of animations included. You can use them by passing the name of the animation\nas a string parameter to the `[scrollAnimation]` directive. The full list of available animations is available later in this document.\n\n- Add the `[scrollAnimation]` directive to the element you want to animate:\n```html\n\u003cdiv [scrollAnimation]=\"'fadeInLeft'\"\u003e\n  \u003ch1\u003e When user scrolls to this currently invisible element \u003c/h1\u003e\n  \u003cp\u003e it will fade in and make it's entry to the page! \u003c/p\u003e\n\u003c/div\u003e\n```\n\n### Using custom animations\nYou can also create your own animations and use them with this library. To do so, you need to create field in your component\nthat will hold the animation configuration as a `AnimationMetadata[]` object. You can then pass this field to the `[scrollAnimation]` directive.\n\n- Create a field in your component that will hold the animation configuration:\n```typescript\nimport {animate, AnimationMetadata, keyframes, query, style} from \"@angular/animations\";\n\nconst customAnimationExample: AnimationMetadata[] = [\n  query('*', [\n    animate('500ms ease-out',\n      keyframes([\n        style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),\n        style({opacity: 1, transform: 'translateX(0)', offset: 1}),\n      ]),\n    ),\n  ])\n];\n```\n\n- Add the `[scrollAnimation]` directive to the element you want to animate:\n```html\n\u003cdiv [scrollAnimation]=\"customAnimationExample\"\u003e\n  \u003ch1\u003e Custom Animation example \u003c/h1\u003e\n  \u003cp\u003e This is a very cool way to animate-in a element into the page! \u003c/p\u003e\n\u003c/div\u003e\n```\n\n### Bind animation progress to scroll position\nYou can also bind the animation progress to the scroll position. This is a cool way to animate-in and out elements as user scrolls up and down the page.\n\n- Add the `[progressBoundToScroll]` input to the element you want to animate:\n```html\n\u003cdiv [scrollAnimation]=\"'fadeInLeft'\" [progressBoundToScroll]=\"true\"\u003e\n  \u003ch1\u003e This element will animate-in and out as user scrolls up and down the page \u003c/h1\u003e\n  \u003cp\u003e This is awesome! \u003c/p\u003e\n\u003c/div\u003e\n```\n\nIf `[progressBoundToScroll]` is set to `false`, the animation will be triggered only once and will not be triggered again as user scrolls up and down the page,\nand the element will stay visible once animated.\n\nIf the `[progressBouldToScroll]` is set to `true`, both `[animationStart]` and `[animationEnd]` will be used, as the animation is bound to the scroll position.\nOn the other hand, if it's set to `false`, only `[animationStart]` will be used, as the animation will be triggered when the element is `animationStart` pixels\nfrom the bottom of the page.\n\n## Available settings\n| Directive               | Type                           | Required  | Default       | Description                                                                                                                                                                                            |\n|-------------------------|--------------------------------|-----------|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| [scrollAnimation]       | `string` `AnimationMetadata[]` | Yes       | `undefined`   | Name of the included animation to use or custom Angular animation.                                                                                                                                     |\n| [progressBoundToScroll] | `boolean`                      | No        | `false`       | If set to `true`, the animation progress (0 - 100%) will be bound to the scroll position (`[animationStart]` - `[animationEnd]`), otherwise the animation will trigger only once on `[animationStart]` |\n| [animationStart]        | `number`                       | No        | `200`         | Distance from the bottom of the page when the animation should trigger.                                                                                                                                |\n| [animationEnd]          | `number`                       | No        | `220`         | Distance from the bottom of the page when the animation should end. Used only when `[progessBoundToScroll]` is `true`.                                                                                 |\n| [duration]              | `string`                       | No        | `'500ms'`     | Duration of the animation in CSS time.                                                                                                                                                                 |\n| [curve]                 | `string`                       | No        | `'ease-out'`  | CSS curve of the animation to be used                                                                                                                                                                  |\n\n## Included animations\n### Fade\n- `fadeIn`\n- `fadeInLeft`\n- `fadeInRight`\n- `fadeInTop`\n- `fadeInBottom`\n### Flip\n- `flipLeft`\n- `flipRight`\n- `flipTop`\n- `flipBottom`\n### Zoom\n- `zoomIn`\n- `zoomOut`\n\n## Contributing\nPull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.\nPlease check CONTRIBUTING.md for more details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpenguin-32%2Fasa","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpenguin-32%2Fasa","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpenguin-32%2Fasa/lists"}