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">
  <img src="~/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!

frontend

Other posts

Setting up a Multi-Themed Application Hero Blog
 

Setting up a Multi-Themed Application • 2022

Uses TailwindCSS and Javascript (React) in this example
Spark Commodities Landing Site Hero Showcase
 

Spark Commodities Landing Site • 2021

Fast, responsive and performant SEO site built with NuxtJS using SSR and TailwindCSS
Nuxt with Tailwind CSS and UI Kit Hero Blog
 

Nuxt with Tailwind CSS and UI Kit • 2020

Set up Vue Tailwind UI Kit in Nuxt along with Tailwind CSS, PostCSS and PurgeCSS.
Reassemble Hero Showcase
 

Reassemble • 2020

Reassemble is a UX Design Consultancy based in Singapore. I made for them a consumer facing website based on NuxtJS with Tailwind CSS, Animated on Scroll and Contentful integration.
Temple Cellars Hero Showcase
 

Temple Cellars • 2020

Redesigning an alcohol e-commerce with custom Vue Shopify theme
Shopify with VueJS - Sass - Theme Kit Hero Blog
 

Shopify with VueJS - Sass - Theme Kit • 2020

Setup a Shopify custom theme using Vue.js and Sass with more control than Slater.
Slater and Custom Shopify Theme Hero Blog
 

Slater and Custom Shopify Theme • 2020

How I setup Slater, and other tools I considered when researching on the tools to develop a custom Shopify storefront.

Contact