How to Use AOS in a Nuxt Project demo repo
AOS (opens new window) is a CSS-Driven “On Scroll” animation library.
# 👣 Steps
- Create a Nuxt project and install AOS.
npx create-nuxt-app nuxt-demo
cd nuxt-demo
npm i aos@next
- Create AOS plugin and pass the options (opens new window) needed in
plugins/aos.client.js
.
import AOS from "aos";
import "aos/dist/aos.css";
export default ({ app }) => {
app.AOS = new AOS.init({ disable: "phone" }); // eslint-disable-line new-cap
};
- Register the plugin in
nuxt.config.js
.
export default {
plugins: ["@/plugins/aos.client"]
};
- Use AOS, e.g. in
pages/aos.vue
.
<template>
<div>
<h1 data-aos="fade">AOS Demo</h1>
<p data-aos="flip-up" data-aos-duration="1000">
AOS is awesome! Thank you
<a class="anchor" href="https://twitter.com/michalsnik">
Michał Sajnóg
</a>
😄
</p>
<p data-aos="slide-up" data-aos-easing="ease">
Paragraph with fade up animation and <code>ease</code> easing.
</p>
<p data-aos="zoom-in" data-aos-anchor=".anchor">
Paragraph with fade down animation with the above link as anchor. This
makes this paragraph animate before the previous paragraph starts
animating.
</p>
<hr class="my-5" />
<b-row class="list-unstyled">
<b-col
v-for="(item, index) in img"
:key="index"
data-aos="fade-up"
data-aos-delay="500"
data-aos-once="true"
sm="6"
class="align-items-center d-flex flex-column justify-content-center mb-5"
>
<b-img fluid :src="getImg(item)" class="mb-3 mr-3" />
<h2 class="h4">{{ item }}</h2>
</b-col>
</b-row>
</div>
</template>
<script>
export default {
data() {
return {
img: ["Animals", "Arch", "Nature", "People", "Tech"]
};
},
methods: {
getImg(name) {
return "https://placeimg.com/400/225/" + name.toLowerCase();
}
}
};
</script>
# 📖 Explanation
- Use animations (opens new window) with
data-aos
attribute. - Adjust the behavior (opens new window) with
data-aos-*
attributes.delay
delays the animation start time. Both this andduration
accept values (opens new window) from 50 to 3000, with step 50ms.once
limits the animation to fire only once.duration
sets how long the animation lasts.easing
is for changing the transition function.anchor
makes another element triggers the animation.