Cool on Scroll Animations Made Easy With the AOS Library

As front-end developer, a popular request you might get from your clients is to implement stunning animation effects on page scroll. There are many libraries to make this task easier for us. AOS, also called Animate on Scroll, is one such library and it does exactly what its name suggests: it lets you apply different kinds of animations to elements as they scroll into view.

Here, you will learn about the inner workings of AOS, how to install the library and get it to work. By the end of this tutorial, building animations on scroll for your clients will be a breeze.

Key Takeaways

• The Animate on Scroll (AOS) library is a useful tool for front-end developers to create on-scroll animations with ease, offering a range of animation types such as fade, flip, and slide.
• The AOS library can be installed using Bower or npm, and initialized with a single line of code. Once initialized, animations can be applied by adding specific attributes to HTML elements.
• AOS allows developers to configure animations using data attributes, such as data-aos-offset, data-aos-duration, and data-aos-easing. It also provides options to trigger animations based on the position of other elements, change the default behavior of animations, and control if animations should be played once or every time an element scrolls into view.
• The AOS library separates the logic and animation for a cleaner, maintainable workflow. It tracks elements and their positions, dynamically adding or removing the aos-animate class based on provided settings. The library also allows for the creation of custom animations and provides features for disabling animations on certain devices or under specific conditions.

How to Install the AOS Library

You can install AOS using Bower or npm.

Bower:

bower <span>install aos --save</span>

npm:

<span>npm install aos --save</span>

Next, link AOS styles and scripts:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="bower_components/aos/dist/aos.css"</span>></span>
</span><span><span><span><script> src<span >="bower_components/aos/dist/aos.js"</script></span>></span><span><span></span>></span></span></span>

If you prefer, you can download the AOS stylesheet and JavaScript files using a CDN as follows:

The CSS:

<span><span><span><link> href<span>="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css"</span> rel<span>="stylesheet"</span>></span></span></span>

The JavaScript:

<span><span><span><script> src<span >="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"</script></span>></span><span><span></span>></span></span>

That’s it, there are no other dependencies, which helps to keep your website’s performance under control.

To initialize AOS, just write the line below in your JavaScript file.

<span>AOS.init();</span>

Getting Started With AOS

After initializing the library all you have to do is add some specific attributes.

To use basic animations you just need to add data-aos="animation_name" to your HTML elements.

There are several types of animation you can choose from. For example, you can add fade animations like “fade”, “fade-up” and “fade-down-left”. Similarly, you can also add flip and slide animations like “flip-up”, “flip-left”, “slide-down”, and “slide-right”.

Here’s the markup of our first example:

bower <span>install aos --save</span>

Besides the initialization line in the previous section, animating the elements doesn’t require you to do anything else.

Have a look at the code above in action:

See the Pen Animate on Scroll Examples by SitePoint (@SitePoint) on CodePen.

Configuring Your Animations With AOS Data Attributes

Let’s dive into the list of the data attributes you can use to configure your animations.

• 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 values are: linear,ease-in-out and ease-out-quart. You can see a list of all accepted values on the project’s Readme file on GitHub.

Here’s an example using data-aos-duration and data-aos-easing:

See the Pen Animate on Scroll Examples – Attributes by SitePoint (@SitePoint) on CodePen.

More data attributes you can use are:

• 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 false in order to animate the elements only once.

Below is an example of using data-aos-anchor-placement:

See the Pen Animate on Scroll Examples – Attributes II by SitePoint (@SitePoint) on CodePen.

Exploring the AOS Library’s Inner Workings

The aim of Animate on Scroll is to handle the logic and the animation separately. For this purpose, the logic is written inside the JavaScript but the animation is written inside the CSS. This separation permits us to write our own animations and modify them based on the needs of the project in a very clean and maintainable workflow.

The library keeps track of all the elements and their positions. This way it can dynamically add or remove the aos-animate class based on the settings that we have provided. For example, the aos-animate class is removed whenever the elements to which it is applied move out of the viewport. However, if an element has the value of data-aos-once set to true, the aos-animate class will not be removed from that particular element, thereby preventing any animation from happening on subsequent scroll events that bring the element into view.

AOS also applies the default value of attributes to the

element on the HTML document. For example, data-aos-easing will be set to ease and data-aos-duration to 400 .

As I have already mentioned, the library applies animation duration only in the range of 50 to 3000 with steps of 50ms. This means that by default, you cannot have an animation duration of 225ms. However, you can add that duration yourself using CSS as follows:

bower <span>install aos --save</span>

Adding your own custom animations to AOS is also quite straightforward.

Just create a data-aos attribute selector and set it to the name of your custom animation.

Next, add the property you want to animate with its initial value, as well as the transition property set to the name of the property you want to animate.

For example, let’s say your animation is called rotate-c and the element to which it is applied is initially rotated by -180 degrees.

Here’s what your CSS should look like:

bower <span>install aos --save</span>

To set the final stage of your animation (in our example this will be the element rotating from -180 degrees to 0 degrees) you add the following CSS rule just below the previous one:

<span>npm install aos --save</span>

Now add data-aos="rotate-c" to your chosen HTML element and this will rotate clockwise (from -180 degrees to 0 degrees) as users scroll that element into view.

Here’s a live demo showing custom rotation animations both clockwise and anti-clockwise using the method above:

See the Pen Animate on Scroll – Custom Animations by SitePoint (@SitePoint) on CodePen.

More Features

The AOS library also provides a lot of other features that make it even more flexible and user friendly. Instead of providing attributes for each element separately, you can pass them as an object to the init() function. Here is an example:

<span><span><span><link> rel<span>="stylesheet"</span> href<span>="bower_components/aos/dist/aos.css"</span>></span>
</span><span><span><span><script> src<span >="bower_components/aos/dist/aos.js"</script></span>></span><span><span></span>></span></span></span>

You can also disable the animations on certain devices or under certain conditions using the disable key and setting its value to a device type like mobile, phone or tablet. Alternatively, you can also disable the library using a function.

Here are two examples to illustrate both features:

<span><span><span><link> href<span>="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css"</span> rel<span>="stylesheet"</span>></span></span></span>

In this Pen, when the screen is smaller than 800px, AOS animations are disabled using the function above:

See the Pen Animate on Scroll Examples – Disable Animaions by SitePoint (@SitePoint) on CodePen.

Besides init(), AOS also provides two additional functions: refresh() and refreshHard().

refresh() is used to recalculate all elements’ offsets and positions. It is called automatically on events like window resize.

refreshHard() is called automatically whenever new elements are programmatically removed from or added to the DOM. This way the library can keep the array of AOS elements updated. Once the array has been updated, refreshHard() also triggers the refresh() function to recalculate all the offsets.

Conclusion

This tutorial has introduced you the Animate on Scroll library which you can use to animate elements as you scroll up or down the webpage.

Having no dependencies and letting you create your own custom animations are two features that make AOS a great choice of library for scrolling animations.

If you’re interested in JavaScript animation, you might also like to check out JS with Performance: requestAnimationFrame by Tim Evko.

Have your ever tried AOS in a project? How was your experience? Feel free to share some tips with fellow readers.

FAQs About on Scroll Animations with the AOS Library

How Do I Install the AOS Library in My Project?

To install the AOS library in your project, you need to use npm (Node Package Manager). Open your terminal and navigate to your project directory. Then, type the following command: npm install aos --save. This command will install the AOS library and save it in your project dependencies. After installation, you can import it into your project using import AOS from 'aos'; and initialize it with AOS.init();.

Can I Customize the AOS Animations?

Yes, you can customize the AOS animations. The AOS library provides several data attributes that you can use to customize the animations. For example, you can use data-aos-duration to set the duration of the animation, data-aos-delay to set a delay before the animation starts, and data-aos-offset to set the distance from the top of the page where the animation should start.

How Do I Use AOS with Vue.js?

To use AOS with Vue.js, you need to install the AOS library in your Vue.js project. After installation, you can import it into your Vue.js components and initialize it in the mounted lifecycle hook. You can then use the AOS data attributes in your HTML to apply the animations.

How Do I Use AOS with React.js?

To use AOS with React.js, you need to install the AOS library in your React.js project. After installation, you can import it into your React.js components and initialize it in the componentDidMount lifecycle method. You can then use the AOS data attributes in your JSX to apply the animations.

Can I Use AOS with Pseudo-Elements?

Unfortunately, AOS does not support animations on pseudo-elements. This is because pseudo-elements are not actual DOM elements and cannot be directly manipulated by JavaScript, which AOS uses to apply the animations.

How Do I Troubleshoot AOS Issues?

If you’re having issues with AOS, there are several things you can do. First, make sure you’ve correctly installed and initialized the AOS library. Second, check your HTML for any syntax errors that might be preventing the animations from working. Third, use your browser’s developer tools to inspect the elements and see if the AOS classes are being applied.

Can I Use AOS on Mobile Devices?

Yes, AOS works on mobile devices. However, keep in mind that animations can be resource-intensive and may not perform well on older or lower-end devices. You can use the disable option to disable animations on certain devices if needed.

How Do I Update the AOS Library?

To update the AOS library, you can use npm. Open your terminal, navigate to your project directory, and type the following command: npm update aos. This command will update the AOS library to the latest version.

Can I Use AOS with Other JavaScript Libraries?

Yes, you can use AOS with other JavaScript libraries. However, make sure that the other libraries do not interfere with the AOS animations. If you’re having issues, try disabling the other libraries to see if they’re causing the problem.

How Do I Uninstall the AOS Library?

To uninstall the AOS library, you can use npm. Open your terminal, navigate to your project directory, and type the following command: npm uninstall aos. This command will remove the AOS library from your project.

The above is the detailed content of Cool on Scroll Animations Made Easy With the AOS Library. For more information, please follow other related articles on the PHP Chinese website!