Animate on Scroll (AOS) into Nuxt js | Double Marvellous
Back to Blog
Development Oct 14, 2024 4 min read

Animate on Scroll (AOS) into Nuxt js

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!

Double Marvellous

AI Chatbot

Double Marvellous.