{"id":13808768,"url":"https://github.com/hm21/ngx-scroll-animations","last_synced_at":"2025-09-02T01:37:38.476Z","repository":{"id":213116419,"uuid":"733068975","full_name":"hm21/ngx-scroll-animations","owner":"hm21","description":"This minimalistic Angular directive, free from external dependencies, empowers you to effortlessly implement CSS animations on elements. These animations trigger when an element comes into view through scrolling on the page. It seamlessly integrates with your choice of CSS animations.","archived":false,"fork":false,"pushed_at":"2025-03-17T15:38:08.000Z","size":22184,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-29T07:09:45.729Z","etag":null,"topics":["angular","angular2","animations","scroll"],"latest_commit_sha":null,"homepage":"","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/hm21.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2023-12-18T13:48:09.000Z","updated_at":"2025-07-24T14:37:19.000Z","dependencies_parsed_at":"2023-12-18T15:23:04.132Z","dependency_job_id":"8af27657-cceb-4e76-82ba-9a0a6370c6c8","html_url":"https://github.com/hm21/ngx-scroll-animations","commit_stats":null,"previous_names":["hm21/ngx-scroll-animations"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hm21/ngx-scroll-animations","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hm21%2Fngx-scroll-animations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hm21%2Fngx-scroll-animations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hm21%2Fngx-scroll-animations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hm21%2Fngx-scroll-animations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hm21","download_url":"https://codeload.github.com/hm21/ngx-scroll-animations/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hm21%2Fngx-scroll-animations/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273077133,"owners_count":25041357,"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","status":"online","status_checked_at":"2025-09-01T02:00:09.058Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","angular2","animations","scroll"],"created_at":"2024-08-04T01:01:51.447Z","updated_at":"2025-09-02T01:37:38.454Z","avatar_url":"https://github.com/hm21.png","language":"TypeScript","funding_links":["https://github.com/sponsors/hm21"],"categories":["Third Party Components"],"sub_categories":["Scroll"],"readme":"\u003ch1\u003eAngular Scroll Animations\u003c/h1\u003e\n\n\u003cdiv\u003e\n\n[![npm version](https://badge.fury.io/js/ngx-scroll-animations.svg)](https://badge.fury.io/js/ngx-scroll-animations)\n[![NPM monthly downloads](https://img.shields.io/npm/dm/ngx-scroll-animations.svg)](https://badge.fury.io/js/ngx-scroll-animations)\n[![NPM total downloads](https://img.shields.io/npm/dt/ngx-scroll-animations.svg)](https://badge.fury.io/js/ngx-scroll-animations)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Issues](https://img.shields.io/github/issues/hm21/ngx-scroll-animations)](https://github.com/hm21/ngx-scroll-animations/issues)\n[![Web Demo](https://img.shields.io/badge/web-demo---?\u0026color=0f7dff)](https://ngx-hm21.web.app/scroll-animations)\n\u003c/div\u003e\n\n\u003cimg src=\"https://github.com/hm21/ngx-scroll-animations/blob/master/assets/showcase.gif?raw=true\" width=450 /\u003e\n\u003ca href=\"https://ngx-hm21.web.app/scroll-animations\"\u003e\n    Demo Website\n\u003c/a\u003e\n\n## Table of contents\n\n- [About](#about)\n- [Getting started](#getting-started)\n- [Documentation](#documentation)\n- [Example](#example)\n- [Contributing](#contributing)\n- [License](LICENSE)\n\n\u003cbr/\u003e\n\n## About\n\nThis minimalistic Angular directive, free from external dependencies, empowers you to effortlessly implement CSS animations on elements. These animations trigger when an element comes into view through scrolling on the page. It seamlessly integrates with your choice of CSS animations.\n\n\u003cbr/\u003e\n\n## Getting started\n\n### Installation\n\n```sh\nnpm install ngx-scroll-animations\n```\n\n#### Optionally include prebuilt animations\n```css\n/* angular-cli file: src/styles.css */\n@import \"node_modules/ngx-scroll-animations/styles/animations.min.css\";\n```\n\n### Import the directive\n```typescript\nimport { Component } from '@angular/core';\nimport { NgxScrollAnimationsDirective } from 'ngx-scroll-animations';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  templateUrl: './app.component.html',\n  styleUrl: './app.component.scss',\n  imports: [ NgxScrollAnimationsDirective ],\n})\nexport class AppComponent {}\n```\n\nAdd `provideNgxScrollAnimations` to your `app.config.ts` file as shown below.\n\n```typescript\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideRouter(routes),\n    provideClientHydration(),\n\n    /// Add the code below\n    provideNgxScrollAnimations({\n      speed: 300,\n      animationName: 'fade-in-up',\n      once: false,\n      /// Other configs...\n    }),\n  ],\n};\n```\n\n\u003cbr/\u003e\n\n\u003ch2\u003eDocumentation\u003c/h2\u003e\n\n### Inputs\n\n| Option            | Type             | Default                                                     | Comment                                                                                |\n|:------------------|:-----------------|:------------------------------------------------------------|:---------------------------------------------------------------------------------------|\n| ngxScrollAnimate  | string           | fade-in-up                                                  | Name of the animation (as example 'fade-in')                                           |\n| zoneless          | boolean          | true                                                        | Set this property to false if your application runs with ng zone.                      |\n| easing            | string           | ease                                                        | Defines how the animation accelerates and decelerates during its runtime.              |\n| speed             | number           | 300                                                         | The speed at which the animation runs in milliseconds.                                 |\n| delay             | number           | 0                                                           | Delays the start of the animation. Accepts the delay time in milliseconds.             |\n| aos               | number           | 0.8 (when thresholdMode is set to 'pixel', the value is 20) | The threshold for triggering the animation when an element scrolls into the viewport.  |\n| thresholdMode     | 'percent' / 'pixel' | percent                                                  | Defines the mode for calculating the threshold: 'percent' or 'pixel'.                  |\n| once              | boolean          | true                                                        | If true, triggers the animation only once when the element scrolls into the viewport.  |\n| disabled          | boolean          | false                                                       | A boolean value to enable or disable the animation.                                    |\n\n\n### Outputs\n| Option          | Type               | Comment                                       |\n|:----------------|:-------------------|:----------------------------------------------|\n| startAnimation  | output             | Emits an event at the start of the animation. |\n| endAnimation    | output             | Emits an event at the end of the animation.   |\n\n### Prebuild animations\n- `'fade-in'`\n- `'fade-in-right'`\n- `'fade-in-left'`\n- `'fade-in-up'`\n- `'fade-in-up-scale'`\n- `'fade-in-down'`\n- `'slide-in-up'`\n- `'scale-in'`\n- `'bounce'`\n- `'rotate'`\n\n\u003cbr/\u003e\n\n\u003ch2\u003eExample\u003c/h2\u003e\n\n#### Simple example\n```html\n\u003cimg\n  ngxScrollAnimate\n  src=\"https://picsum.photos/300\"\n  alt=\"demo-image\"\n/\u003e\n```\n\n\u003cbr/\u003e\n\n#### Complete example demonstrating all properties\n```html\n\u003cimg\n  ngxScrollAnimate=\"fade-in-up\"\n  easing=\"ease\"\n  speed=\"300\"\n  delay=\"0\"\n  aos=\"0.8\"\n  thresholdMode=\"percent\"\n  once=\"true\"\n  disabled=\"false\"\n  (endAnimation)=\"endAnimation()\"\n  (startAnimation)=\"startAnimation()\"\n  src=\"https://picsum.photos/300\"\n  alt=\"demo-image\"\n/\u003e\n```\n\u003cbr/\u003e\n\n#### Custom animation\n```css\n@keyframes my-special-animation {\n    from {\n        opacity: 0;\n        background: red;\n    }\n    to {\n        opacity: 1;\n        background: blue;\n    }\n}\n```\n\n```html\n\u003cimg\n  ngxScrollAnimate=\"my-special-animation\"\n  src=\"https://picsum.photos/300\"\n  speed=\"2000\"\n  alt=\"demo-image\"\n/\u003e\n```\n\n\n## Sponsors \n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sponsors/hm21\"\u003e\n    \u003cimg src='https://raw.githubusercontent.com/hm21/sponsors/main/sponsorkit/sponsors.svg'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Contributing\n\nI welcome contributions from the open-source community to make this project even better. Whether you want to report a bug, suggest a new feature, or contribute code, I appreciate your help.\n\n### Bug Reports and Feature Requests\n\nIf you encounter a bug or have an idea for a new feature, please open an issue on my [GitHub Issues](https://github.com/hm21/ngx-scroll-animations/issues) page. I will review it and discuss the best approach to address it.\n\n### Code Contributions\n\nIf you'd like to contribute code to this project, please follow these steps:\n\n1. Fork the repository to your GitHub account.\n2. Clone your forked repository to your local machine.\n\n```bash\ngit clone https://github.com/hm21/ngx-scroll-animations.git\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhm21%2Fngx-scroll-animations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhm21%2Fngx-scroll-animations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhm21%2Fngx-scroll-animations/lists"}