AOS

How to use AOS

AOS or Animate On Scroll is a JavaScript library that allows you to easily animate elements as they enter the viewport during scrolling. With AOS, you can add animations such as fade, slide, zoom, and rotate to your web page, giving it a more dynamic and engaging feel.

To use AOS, you need to follow these steps:

1. Install AOS: To use AOS on your website or application, you first need to install it. You can do this by downloading the AOS library from the official website or by using a package manager such as npm or yarn.

2. Include AOS in your project: Once you have installed AOS, you need to include it in your project. You can do this by adding the AOS script tag to the header of your HTML document or by importing it in your JavaScript file if you are using a module bundler like Webpack.

3. Add data-aos attributes to your HTML elements: To animate an element with AOS, you need to add the data-aos attribute to it, along with the animation type you want to apply. For example, if you want to fade an element in, you would add data-aos="fade-in" to the element.

4. Initialize AOS: After you have added the data-aos attributes to your HTML elements, you need to initialize AOS. You can do this by calling the AOS.init() method in your JavaScript code.

5. Customize AOS settings: AOS comes with a variety of customization options that you can use to fine-tune the animations on your website. For example, you can change the duration and delay of the animations, set the offset at which the animations start, and choose whether to animate elements once or every time they enter the viewport.

Here is an example of how you can use AOS to animate a section of your website:

<section data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500">
  <h1>Welcome to my website</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>

In this example, the section element will fade up when it enters the viewport, with a duration of 1000ms and a delay of 500ms.

Overall, AOS is a powerful and easy-to-use library that can add visual interest and interactivity to your website with just a few lines of code. By following these simple steps, you can quickly get started with AOS and create stunning animated web pages.