Book a Free Call

Animate on Scroll (AOS) into Nuxt js



Hello pals. Well here’s another sticky one that caught me for a while, and after trawling the blogs I got her going.

Firstly, install AOS. This didn’t work for me with Yarn but worked fine with NPM.



npm install aos --save

Then, create a plugin file in your plugins. Crucially, add .client to the name…aos.client.js

//in your config file...

~/plugins/lodash.js',
'~/plugins/aos.client.js',
],

Inside that plugin file, you can add your options etc:

import AOS from "aos";
 
import "aos/dist/aos.css";
 
export default ({ app }) => {
  app.AOS = AOS.init({
    once: false,
  })
}

Then you should be good to go:

<section 
data-aos="fade-in" 
data-aos-duration="200"
data-aos-easing="ease-in-out-cubic"
class="yourclass">This should fade in</section>

Hope that helps someone out there!

Need rapid website development:

For smaller projects at high speed


  • Adding script tag embed to Gatsby component

    Read More
  • Get more than 100 queries in GraphQL (I felt stupid)

    Read More
  • Animate on Scroll (AOS) into Nuxt js

    Read More
  • WordPress Super-admin hack

    Read More
  • Add content or ACF field under thumbnail/image gallery in Woocommerce

    Read More

Tags


Categories

Is it urgent? Donate to Cork Simon

Got an urgent issue?

Charlie's Cottage, Carrigrohane, Co. Cork, T12 WY9H

(085) 7686677