ngx-scroll-animations v1.1.3

Table of contents

• About
• Getting started
• Documentation
• Example
• Contributing
• License

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.

Installation

npm install ngx-scroll-animations

Optionally include prebuilt animations

/* angular-cli file: src/styles.css */
@import "node_modules/ngx-scroll-animations/styles/animations.min.css";

Standalone component

import { Component } from '@angular/core';
import { NgxScrollAnimationsModule } from 'ngx-scroll-animations';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  imports: [ NgxScrollAnimationsModule ],
})
export class AppComponent {}

Or for Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { NgxScrollAnimationsModule } from 'ngx-scroll-animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxScrollAnimationsModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Inputs

Outputs

Prebuild animations

• 'fade-in'
• 'fade-in-right'
• 'fade-in-left'
• 'fade-in-up'
• 'fade-in-up-scale'
• 'fade-in-down'
• 'slide-in-up'
• 'scale-in'
• 'bounce'
• 'rotate'

Simple example

<img
  ngxScrollAnimate
  src="https://picsum.photos/300"
  alt="demo-image"
/>

Complete example demonstrating all properties

<img
  ngxScrollAnimate="fade-in-up"
  easing="ease"
  speed="300"
  delay="0"
  aos="0.8"
  thresholdMode="percent"
  once="true"
  disabled="false"
  (endAnimation)="endAnimation()"
  (startAnimation)="startAnimation()"
  src="https://picsum.photos/300"
  alt="demo-image"
/>

Custom animation

@keyframes my-special-animation {
    from {
        opacity: 0;
        background: red;
    }
    to {
        opacity: 1;
        background: blue;
    }
}

<img
  ngxScrollAnimate="my-special-animation"
  src="https://picsum.photos/300"
  speed="2000"
  alt="demo-image"
/>

Contributing

I 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.

Bug Reports and Feature Requests

If you encounter a bug or have an idea for a new feature, please open an issue on my GitHub Issues page. I will review it and discuss the best approach to address it.

Code Contributions

If you'd like to contribute code to this project, please follow these steps:

1. Fork the repository to your GitHub account.
2. Clone your forked repository to your local machine.

git clone https://github.com/hm21/ngx-scroll-animations.git