Create the Ultimate User Experience with AOS (Animate on Scroll)
Tags: css, html, webdev, ux
Published: 2021-04-11 03:42:20

# What is **AOS**?

As _front-end developer_, a popular request you might get from your clients is to implement stunning animation effects on page scroll. **AOS** (Animate on Scroll) is the most popular library for the purpose of making this task easier for us.

**AOS** is a library developed by [Michał Sajnóg](https://github.com/michalsnik) and it does exactly what its name suggests: it lets you apply different kinds of animations to elements as they scroll into view.

To see an example of a project using **AOS**, click [here](https://tapajyoti-bose.web.app/).

# Demo

The animation effects available by default are shown below.
**NOTE:** The animations can be further customized using the various properties like `data-aos-duration`.

{% codepen https://codepen.io/ruppysuppy/pen/BapRQgY %}

# Installing **AOS**

**AOS** can be installed using **Bower** or **npm**.

**Bower**:

```bash
bower install aos --save
```

**npm**:

```bash
npm install aos --save
```

Next, link **AOS** styles and scripts:

```html
<link rel="stylesheet" href="bower_components/aos/dist/aos.css">
```

```html
<script src="bower_components/aos/dist/aos.js"></script>
```

**AOS** stylesheet and **JavaScript** files can also be downloaded using a **CDN** as follows:

**CSS**:

```html
<link href="https://cdn.rawgit.com/michalsnik/aos/2.3.4/dist/aos.css" rel="stylesheet">
```

**JavaScript**:

```html
<script src="https://cdn.rawgit.com/michalsnik/aos/2.3.4/dist/aos.js"></script>
```

To initialize **AOS**, just use the line below in the **JavaScript** file.

```javascript
AOS.init();
```

# Using **AOS**

After the setup, just add `data-aos="<animation-name>"` to the HTML elements to use basic animations. For example

```html
<div data-aos="fade-up">
    ...
</div>

<div data-aos="flip-down">
    ...
</div>

<div data-aos="zoom-in">
    ...
</div>
```

# Configuring the Animation

Additional properties can be used to configure the animations:
- **`data-aos-delay`**: You can use this attribute to specify the delay of the animation play time. The duration value can be anywhere between `0` and `3000` with steps of `50ms`. Since the duration is handled in CSS, using smaller steps or a wider range would have unnecessarily increased the size of the CSS code. The default value for this attribute is `0`.
- **`data-aos-offset`**: You can use this attribute to trigger the animation sooner or later than the designated time. Its default value is `120px`.
- **`data-aos-duration`**: You can use this attribute to specify the duration of the animation. The duration value can be anywhere between `50` and `3000` with steps of `50ms`. Since the duration is handled in CSS, using smaller steps or a wider range would have unnecessarily increased the size of the CSS code. This range should be sufficient for almost all animations. The default value for this attribute is `400`.
- **`data-aos-easing`**: You can use this attribute to control the timing function for animating different elements. Possible (not exhaustive) values are: `linear`, `ease-in-out` and `ease-out-quart`
- **`data-aos-anchor`**: This attribute is useful when you want to trigger the animation based on the position of some other element. It accepts any selector as its value. The default value is `null`. This means that all the animations will be triggered with respect to the element’s own position.
- **`data-aos-anchor-placement`**: By default, the animations on an element are applied as soon as its top part reaches the bottom part of the window. This behavior can be changed using the `data-aos-anchor-placement` attribute. As its value, this attribute accepts two words separated by a hyphen. For example, you can set it to `top-bottom`, `top-center` or `top-top`. Three such combinations are also possible for both the `center` and `bottom` values.
- **`data-aos-once`**: You can also control if the animations should be played only when you get to a particular element the first time or every time you scroll up or down. By default, the animations are replayed every time the elements scroll into view. You can set the value of this attribute to `true` in order to animate the elements only once.

# Adding Custom Animations

Sometimes built-in animations are just not enough. Let's create an animation depending on the resolution of the screen. Here's one approach to do it:

**style.css**

```css
[data-aos="new-animation"] {
	opacity: 0;
	transition-property: transform, opacity;
}
[data-aos="new-animation"].aos-animate {
	opacity: 1;
}

@media screen and (min-width: 768px) {
	[data-aos="new-animation"] {
		transform: translateX(100px);
	}
	[data-aos="new-animation"].aos-animate {
		transform: translateX(0);
	}
}
```

Then use it in HTML:

```html
<div data-aos="new-animation"></div>
```

The element will only animate opacity on mobile devices, but from 768px width it'll also slide from right to left.

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Reference

1. [AOS repository](https://github.com/michalsnik/aos)
2. [Sitepoint Blog](https://www.sitepoint.com/cool-scroll-animations-made-easy-aos-library/)

# Thanks for reading

Reach out to me on:

-   [GitHub](https://github.com/ruppysuppy)
-   [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose-429a601a0)
-   [Portfolio](https://tapajyoti-bose.web.app) (For freelance projects, reach out through the contact form)