How to Use the Animate on Scroll(AoS) Library in Vue

Abiola Esther
author
Abiola Esther
colorful scrolls

Animations are used to attract people’s attention and add interactivity to your web application rather than just a static page. With animations, users tend to engage more with the features of your application. One of the best animations to add to your webpage is the on-scroll animation. An on-scroll animation is a form of Scrollytelling, which means telling a story or displaying content while scrolling.

On-scroll animation can be complicated to implement on a website without the use of certain scroll animation libraries. These libraries provide a simple interface for creating different interactions on the scroll and improving the user experience. With the Animate on scroll(AOS) library, you can add animations smoothly, and it's easy to configure.

This tutorial will teach you about the Animate On Scroll (AOS) Library, how to integrate it into your Vue applications, and the different use cases for it. We will also build a landing page in Vue that uses the AOS Library for animations.

Prerequisites

This tutorial assumes the reader has the following:

  1. Node installed on their local development machine. You can verify if you do by running the command below in your terminal.
node -v
  1. A basic knowledge of HTML, CSS, JavaScript, and Vue

Introduction to Animate On Scroll Library(AOS)

Animate On Scroll Library (AOS) is a library developed by Michał Sajnóg. The library's main goal is to detect the position of elements and then add appropriate classes for animation when they appear in the viewport.

Animate On Scroll Library provides an ease to let you apply different kinds of animations to elements as they scroll into view. The library was built with all types of users in mind to make it easy to configure for accessibility.

AOS is an open-source library with over 16k+ stars on Github

Integrating Animate on scroll(AOS) library in a Vue app.

Installation

To set up the AOS library in your Vue app is quite easy and can be done in different ways, such as:

Install using Yarn

yarn add aos

Install using npm

npm install aos --save

Install with CDN

CSS

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

Javascript

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

Importing

Import AOS into the main.js file

import AOS from 'aos'
import 'aos/dist/aos.css'

Initialize AOS into your vue app with the use of the mounted lifecycle method.

new Vue({
  render: (h) => h(App),
  mounted() {
    AOS.init()
  },
}).$mount('#app')

Animation Options

After the setup is complete all you have to do is add some specific attributes, data-aos="animation_name" to your HTML elements in your template for the animations. The AOS Library has some predefined options for the animations such as :

  • Fade animations
  • Flip animations
  • Slide animations
  • Zoom animations

Here is the full list of the different animations that can be used.

For any animation you choose to use, it can simply be added to the HTML elements in your templates,

<div class="displayBox" data-aos="zoom-in">
  <p>Animated element using zoom-in.</p>
</div>

Configuring Animations With AOS Data Attributes.

One unique feature about the AOS library is the ability to configure the animation using AOS Data Attributes, with these you can control your animations to your preference. The different attributes are the following:

data-aos-duration

For every animation, there is always a predefined duration for it to last for, AOS provides a default duration of 400ms. To use this attribute, your values must between 0 to 3000, with step 50ms.

<div class="displayBox" data-aos="zoom-in" data-aos-duration="1500">
  <p>Animated element using zoom-in.</p>
</div>

data-aos-delay

The amount of time in which you want your animation to be delayed can be set using this attribute. AOS provides a default duration of 50ms. To use this attribute, your values must between 0 to 3000, with step 50ms.

<div class="displayBox" data-aos="zoom-in" data-aos-delay="500">
  <p>Animated element using zoom-in.</p>
</div>

data-aos-offset

You can use this attribute to trigger the animation earlier or later than the designated time. AOS provides a default value of 120px.

<div class="displayBox" data-aos="zoom-in" data-aos-offset="200px">
  <p>Animated element using zoom-in.</p>
</div>

data-aos-easing

With the use of this AOS attribute, you can control the timing function which specifies the speed curve of the animation, it enables you to control and vary the acceleration of an animation that is it defines where the animation speeds up and slows down over the specified duration. The attribute uses the same values for your CSS animations such as linear, ease, ease-in, ease-out, ease-in-out. Here is the full list of possible values.

<div class="displayBox" data-aos="zoom-in" data-aos-easing="ease-in">
  <p>Animated element using zoom-in.</p>
</div>

data-aos-anchor-placement

This attribute gives you control over the position in which the animation starts. By default, AOS sets the start position as soon as its top part reaches the bottom part of the window. The possible values to use for this attribute are top-bottom, top-center, top-top, center-bottom, center-center. Here is the full list of possible values.

<div
  class="displayBox"
  data-aos="zoom-in"
  data-aos-anchor-placement="top-center"
>
  <p>Animated element using zoom-in.</p>
</div>

data-aos-once

Animations in the AOS library by default are always replayed each time it's scrolled into view or out of view. With this attribute, you can set the value to false in other to animate the element only once.

<div class="displayBox" data-aos="zoom-in" data-aos-once="false">
  <p>Animated element using zoom-in.</p>
</div>

Another alternative is to set your preferred values needed globally for all the elements you want to animate. This can be done by passing them as an object to the init() .

new Vue({
  render: (h) => h(App),
  mounted() {
    AOS.init({
      // Global settings:
      offset: 120, // offset (in px) from the original trigger point
      delay: 0, // values from 0 to 3000, with step 50ms
      duration: 400, // values from 0 to 3000, with step 50ms
      easing: 'ease', // default easing for AOS animations
      once: false, // whether animation should happen only once - while scrolling down
      anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
    })
  },
}).$mount('#app')

The AOS library also provides a lot of other features that make it even more flexible and user-friendly.

Adding custom animations:

In cases where the built-in animations are just not enough, The AOS library permits us to write our own animations and modify them based on the needs of the project in a very clean and maintainable workflow. This is quite easy to implement; In the style tag of the component

<style>
  /*  Animation starts here */
  [data-aos='rotate-round'] {
    transform: rotate(-360deg);
    transition-property: transform;
  }
  /*  Animation ends here */
  [data-aos='rotate-round'].aos-animate {
    transform: rotate(0deg);
  }
</style>

Then used, in the templates of the component

<template>
  <div class="displayBox" data-aos="rotate-round">
    <p>Animated element using zoom-in.</p>
  </div>
</template>

Similar to animations other css properties can also be created.

Adding custom transitions:

In the style tag of the component

<style>
  body[data-aos-duration='new-transition'] [data-aos],
  [data-aos][data-aos][data-aos-duration='new-transition'] {
    transition-duration: 4000ms;
  }
</style>

Then used, in the templates of the component

<template>
  <div class="displayBox" data-aos-duration="new-transition">
    <p>Animated element using zoom-in.</p>
  </div>
</template>

This gives the component a new transition duration.

Tutorial Demo: Building a landing page with Vue using the AOS library

Yay! In this section, we will build a basic landing page in Vue, and animate the landing page using the AOS library.

Check out the demo on Codepen and the code repository on GitHub.

For an easier understanding of this section, we will go through each part step by step.

Create a Vue Project

First, let’s start up a Vue application by using installing the vue CLI:

First, install the Vue command-line interface (CLI):

npm install -g @vue/cli

Then, create the Vue app using this command:

vue create landing-Page-vue

With these steps, our vue application has been successfully created, switch to its repository using cd landing-Page-vue, and run the command below to start the application.

npm run serve

Add content to our Vue app

Open the Vue app in your favorite integrated development environment (IDE).

A Vue single file components allow us to define the HTML/CSS and JS of a component all within a single .vue file. The formal structure contains <template>, <script>, <style>

In the App.vue, paste the code below to in the template tag.

<template>
   <main id="app">
    <section class='intro'>
      <div class='introDescription'>
         A student's Guide
         <br>
         <p>  to Learning from Home </p>
      </div>
        <img class='introImage' src='https://res.cloudinary.com/dsderm9xw/image/upload/v1622028117/3D%20Illustrations/3d-illustration4_usckww.png' alt='3d illustration of boy with a flag'/>
    </section>
     <section class='guide1'>
       <img class='guide1Image' src='https://res.cloudinary.com/dsderm9xw/image/upload/v1622028085/3D%20Illustrations/3d-illustration2_ykuua3.png' alt='3d illustration of boy sitting with legs crossed'
           />
      <div class='guide1Description'>
        <h1> Set up your  <br> study space. </h1>
         <div>
           Find an area in your house where
           <br>
          you can sit comfortably and focus.
          <br>
          Make it separate to your relaxation space.
          <br>
          Ideally away from a TV screen
          <br>
          or other distractions.
         </div>
      </div>
    </section>
     <section class='guide2'>
      <div class='guide2Description'>
            <h1> Plan your  <br> day ahead. </h1>
         <div>
           If you have one,
           <br>
          follow the schedule provided by your school.
          <br>
          If you just have a list of things to study,
          <br>
         break it down into small tasks and
          <br>
          plan to do the hardest ones
          <br>
          when you have the most energy.
         </div>
      </div>
        <img class='guide2Image' src='https://res.cloudinary.com/dsderm9xw/image/upload/v1622028057/3D%20Illustrations/3d-illustration1_j06j0a.png' alt='3d illustration of boy with laptop sitting'/>
    </section>
  <footer>
    Developed by FAE
  </footer>
  </main>
</template>

The code above is a simple HTML markup that we will use to animate our landing page.

Ready to pick up the pace?

Enter your email and receive regular updates on our latest articles and courses

What do you want to take to the next level?

Styling the landing page

For the styling, we will use CSS to style each of the sections of the page. Paste the code below in the style tag.

<style>
*{
  margin:0;
  padding:0;
}
.intro{
  display:flex;
  background: #fff3e2;
  justify-content: space-evenly;
  padding-top:80px;
  height: 500px;
}
.introDescription {
  font-size:30px;
  color:#632b2b;
  padding-top:120px;
}
.introDescription p{
  font-size:60px;
  color:#632b2b;
  font-weight: 900;
}
.guide1{
  display:flex;
  background: #ffd4a9;
  justify-content: space-evenly;
  padding-top:80px;
  height: 500px;
   overflow:hidden;
}
.guide1Description h1{
  font-size:48px;
  color:#632b2b;
  padding: 120px 0px 20px 0px;
}
.guide1Description div{
  background:#fff3e2 ;
  color:#632b2b;
  font-size:20px;
  padding:10px;
  border-radius:10px;
}
.guide2{
  display:flex;
  background: #fff3e2;
  justify-content: space-evenly;
  padding-top:80px;
  height: 500px;
   overflow:hidden;
}
.guide2Description h1{
  font-size:48px;
  color:#632b2b;
  padding: 120px 0px 20px 0px;
}
.guide2Description div{
  background:#ffd4a9 ;
  color:#632b2b;
  font-size:20px;
  padding:10px;
  border-radius:10px;
}
footer{
  background: #ffd4a9;
  color:#632b2b;
  padding:10px;
  text-align: right;
  font-weight: 900;
}
/* responsiveness */
@media screen and (max-width: 500px){
  .intro{
  display:block;
  padding-top:10px;
  height:auto;
}
.introImage{
  width:100%;
}
.introDescription {
  padding: 30px 0px 0px 20px;
}
 .guide1{
 display:block;
  padding-top:10px;
  height:auto;
}
.guide1Image{
  width:100%;
}
.guide1Description {
  padding: 20px;
}
.guide1Description h1{
  padding:30px 0px;
}
.guide2{
 display:block;
  padding-top:10px;
  height:auto;
}
.guide2Image{
  width:100%;
}
.guide2Description {
  padding: 20px;
}
.guide2Description h1{
  padding:30px 0px;
}
}
</style>

Animate the page using Animate On Scroll (AOS) Library.

To add the AOS to our project, we first install it using the command below;

npm install aos --save

Then next, we initialize it in the main.js file.

import AOS from 'aos'
import 'aos/dist/aos.css'
new Vue({
  render: (h) => h(App),
  mounted() {
    AOS.init()
  },
}).$mount('#app')

After setting up AOS into the Vue app successfully, we then animate the page by the AOS attribute needed.

Paste the updated code below into your template tags.

<template>
  <main id="app">
    <section class="intro">
      <div
        class="introDescription"
        data-aos="zoom-in"
        data-aos-duration="1500"
        data-aos-delay="500"
      >
        A student's Guide
        <br />
        <p>to Learning from Home</p>
      </div>
      <img
        class="introImage"
        src="https://res.cloudinary.com/dsderm9xw/image/upload/v1622028117/3D%20Illustrations/3d-illustration4_usckww.png"
        alt="3d illustration of boy with a flag"
      />
    </section>
    <section class="guide1">
      <img
        class="guide1Image"
        src="https://res.cloudinary.com/dsderm9xw/image/upload/v1622028085/3D%20Illustrations/3d-illustration2_ykuua3.png"
        alt="3d illustration of boy sitting with legs crossed"
        data-aos="slide-down"
        data-aos-ease="ease"
        data-aos-duration="1500"
        data-aos-delay="500"
      />
      <div
        class="guide1Description"
        data-aos="slide-up"
        data-aos-ease="ease"
        data-aos-duration="1500"
        data-aos-delay="1000"
      >
        <h1>
          Set up your <br />
          study space.
        </h1>
        <div>
          Find an area in your house where
          <br />
          you can sit comfortably and focus.
          <br />
          Make it separate to your relaxation space.
          <br />
          Ideally away from a TV screen
          <br />
          or other distractions.
        </div>
      </div>
    </section>
    <section class="guide2">
      <div
        class="guide2Description"
        data-aos="slide-down"
        data-aos-ease="ease"
        data-aos-duration="1500"
        data-aos-delay="1000"
      >
        <h1>
          Plan your <br />
          day ahead.
        </h1>
        <div>
          If you have one,
          <br />
          follow the schedule provided by your school.
          <br />
          If you just have a list of things to study,
          <br />
          break it down into small tasks and
          <br />
          plan to do the hardest ones
          <br />
          when you have the most energy.
        </div>
      </div>
      <img
        class="guide2Image"
        src="https://res.cloudinary.com/dsderm9xw/image/upload/v1622028057/3D%20Illustrations/3d-illustration1_j06j0a.png"
        alt="3d illustration of boy with laptop sitting"
        data-aos="slide-up"
        data-aos-duration="1500"
        data-aos-ease="ease"
        data-aos-delay="1000"
      />
    </section>
    <footer>Developed by FAE</footer>
  </main>
</template>

With the updated changes, our landing page’s animations will only start animating when we scroll into the view of the section.

See demo here.

Conclusion

This article has introduced you to the Animate on Scroll library which is used to animate elements as you scroll up or down the webpage. Also, we were able to integrate it in our Vue js application and also build an animated landing page in Vue using AOS Library.

Ready to pick up the pace?

Enter your email and receive regular updates on our latest articles and courses

What do you want to take to the next level?