Adding AOS

AOS is a JavaScript animation library that animates your DOM elements beautifully into view as you scroll down (or up) the page. It is a small library and very easy to use for triggering animations as you scroll a page without having to code them yourself. To animate an element, simply use the data-aos attribute:

<div data-aos="fade-in">...</div>

Just as simple as this, the element will fade in gradually as you scroll the page. You can even set how long in seconds for the animation to complete. So, let's find out how you can add this library to your Nuxt project in the following steps:

1. Install AOS via npm on your terminal:

$ npm i aos

2. Add the following elements to index.vue as follows:

// pages/index.vue
<template>
  <div class="grid-x">
    <div class="medium-6 medium-offset-3 cell" data-aos="fade-up">
      <img src="~/assets/images/sample-01.jpg">
    </div>
    <div class...