AOS is a popular library that you can use if you want to play animations on scroll. The integration with Nuxt is not obvious. Initially I followed this interesting tutorial. But I have encountered issues similar to those described here or here. Finally, I found my own way. I'll show you my solution in this post.
Rather than creating a plugin, I created a mixin, calling AOS.init()
in the mounted lifecycle hook.
// mixins/aos.js
import AOS from 'aos'
import 'aos/dist/aos.css'
export default {
mounted() {
AOS.init({ })
}
}
Then, in your vue
file, import the mixin and add data-aos attribute on the element you want to animate.
<template>
<div>
<div data-aos="fade-up">This element should be animated on scroll</div>
<div data-aos="fade-left">This element should be animated on scroll</div>
<div data-aos="fade-right">This element should be animated on scroll</div>
<div data-aos="fade-down">This element should be animated on scroll</div>
<div data-aos="slide-up">This element should be animated on scroll</div>
<div data-aos="slide-left">This element should be animated on scroll</div>
<div data-aos="slide-right">This element should be animated on scroll</div>
</div>
</template>
<script>
import aosMixin from '~/mixins/aos'
export default {
name: 'PageIndex',
mixins: [aosMixin]
}
</script>
This is the easiest solution I have come up with.