Animations on Scroll – Made Easy!

Have you ever wanted to rapidly increase the usability of your site or the application? It’s going to be an undoubted yes because that’s what every developer dreams of making it – right? There are various ways that we can experiment with our sites, some work better than others and some require more time to get working! Even if you’ve found the user experience challenging, you can make it better, and I’ll show you how!

Anything that doesn’t jump off the page as interesting, exciting, funny, or relevant is liable to get slashed user experience. Most people will at least have a glance throughout the page just by scrolling since they’re not intended to read the entire page content at first. So, scrolls are one of the perfect places to grab the attention of the users and to enhance the usability of them. If you make scrolling, an exciting and an addictive one, you can boost the user’s experience while being able to brand your site and keep them engaged!

Let’s jump right into the ways in which we can implement the animations on scrolling. Animation on Scroll (AOS) is a perfect library that makes animations really easy and fascinating while scrolling the page. I recommend taking a look at the AOS official docs which has ready to use templates with several use cases. So the idea of this blog is to cover the initial setup for implementing the scroll animations in your project which is not explained in their doc.

I’ve listed the initial setup for Angular, Vue.js and React projects since they’re the most popular amongst the biggest front end frameworks. Let’s get them done one by one. But in general, we need to add AOS to our dependencies.

Run npm install aos --save

Either run npm i or add the CDN sources for CSS and JS in your index.html file.

CSS: <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

JS: <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Next comes the initialization part of AOS. A piece of common information on initialization of AOS is, we always need to import and init them in the app or any other parent level component of which we need to do animations. This is due to the fact that AOS has observers in it, so whenever a new element appears in DOM, it is supposed to animate them properly.

  1. Initialize AOS in Angular

    We need to initialize the AOS in your app.component.ts as follows,
    a. Import the AOS library in your component
import * as AOS from 'aos';

b. We need to initialize the AOS library during the initialization of your component. So let’s initialize AOS on the ngOnInit lifecycle hook.

AOS.init();
  1.   Initialize AOS in Vue.js

a. Import the AOS library in main.js file.

import * as AOS from 'aos';
import 'aos/dist/aos.css';

b. We need to initialize the AOS library during the creation of your component. So let’s initialize AOS on the Created() lifecycle hook. Add the following snippet in the new Vue portion of the main.js file.

new Vue({
   created () {
       AOS.init()
   },   
   router,
   store: Store,
   render: h => h(App)
}).$mount('#app');
  1. Initialize AOS in React

The steps are apparent now so let’s just have a glance at the following code snippet to understand the flow in React.

import AOS from 'aos';
import 'aos/dist/aos.css';
.
.
.
 componentDidMount(){
   AOS.init({
     duration : 2000
   })
 }

Initialization is now complete! Try adding data-aos=”fade-up” to any of your HTML element and admire the animations on scrolling. Refer the AOS docs for more customized scroll animations.

Reference

  1. https://michalsnik.github.io/aos/