Angular aos animation installation

1. First install aos animation in your project using following command

npm i --save aos

2. Then go to angular.json file and find the script and style part.

3. Just call the css and js file from the AOS

The aos css file path is like "node_modules/aos/dist/aos.css"

And the aos js file path is like "node_modules/aos/dist/aos.js"

The output will be like this

            "styles": [
              "node_modules/aos/dist/aos.css"
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/aos/dist/aos.js"
            ]

4. If you want to add aos animation for your entire project just add the following code in app.component.ts

import * as AOS from 'aos';

5. After that add the following code inside the export class

ngOnInit(){
AOS.init();
}

Now we came to the final step

6. Add the animation effect to the element.

data-aos="fade-left"


For Example -:)( <div class="container" data-aos="fade-left"></div> )