Nuxt with Animated on Scroll

Animated on Scroll (AOS) is a CSS library to animate elements on websites.

Motivation

Recently, when doing the Reassemble website, I wanted to see if I could replicate those websites with elements of the page appearing on scroll.

After a quick googling, seems like Animated on Scroll is one of the most commonly used library around. The installation seems super simple and I went ahead to try it out.

Complications with Nuxt Static Pages

To make a website fully search-engine-optimised, I had to make use of NuxtJS’s route generation tool to generate static pages of the site. Not only is the site static, you can also add meta tags and other useful features to make the site more search engine friendly.

However, this feature complicates the import of AOS. When in development mode, the animation works but after generating the static pages, it no longer does. There is a specific way to install AOS for NuxtJS and I’ll be detailing it here. Some background on my NuxtJS project:

It is using Tailwind CSS and Purge CSS. You can read more about it in my previous blog post.
Pages are generated with server-side rendering.

Installation of AOS on NuxtJS

Like any other installation of plugins, we begin by installing the webpack module, and installing it as a plugin on NuxtJS.

// yarn
yarn add aos

// npm
npm install aos --save

// @/plugins/aos.js
// I've went ahead to declare all the config here so it is global
// Read up more here: https://github.com/michalsnik/aos

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

export default ({ app }) => {
  app.AOS = new AOS.init({
    disable: window.innerWidth < 640,
    // offset: 200,
    duration: 600,
    easing: 'ease-in-out-cubic',
    once: true,
  }); // or any other options you need
};

// nuxt.config.js
// Use purgeCSS config if your app is using it.
// Basically you wanna instruct purgeCSS to whitelist all of AOS attributes so it wouldn't get purged.

plugins: [
    { src: "@/plugins/aos", mode: "client" },
  ],
purgeCSS: {
    whitelist: ["aos-init", "aos-animate", "data-aos-delay", "data-aos-duration", "fade-up", "zoom-in"],
}

After the installation is done, simply use AOS on your NuxtJS app like so:

<div data-aos="fade-up" data-aos-delay="300">
  ![](~/assets/pages/home/hero.svg)
  <img
    data-aos="zoom-in"
    data-aos-delay="500"
    src="~/assets/pages/home/hero-2.svg"
  />
</div>

And with that, you’ll have some fancy animations on your NuxtJS app!

Thanks for reading!