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