How to make Vue.js (AOS) Animation for Web Pages?

Last updated on August 30, 2022

Animation on the page means creating interactivity on a web page to keep users engaged in a web application rather than just a static page. It keeps visitors more engaged with the features of the website.

Animation on the webpage can be complicated without using animate libraries. these libraries provide simple integration on the web page with stunning animation effects on page scroll. Although you can create animations and integrate them with the animation library interface.

AOS is one of the best libraries to animate the elements, pictures, headings paragraphs, buttons, etc. using an animation name in data attributes like fade-left, fade-right, fade-bottom, fade-top, zoom-in, and zoom-out, flip-right, flip-left animation. AOS also provides scroll animation from top to bottom or back to top.

Prerequisites of AOS using Vuejs

When using Vuejs you can easily integrate the AOS into your components, you need the Vuejs platform and install the package of AOS, and you should have basic knowledge of HTML, CSS, and Vuejs.

Use fade-left, fade-right, fade-bottom, fade-top animation, and zoom-in and out animation.

Getting to start AOS with Vuejs

The setup of AOS with Vuejs is very simple, you just need to add a package and follow the steps below:

Installation

Using npm install AOS

npm install aos --save

Now import the AOS library in the main.js file

import AOS from 'aos'
import 'aos/dist/aos.css'

Now initialize the AOS into Vue App in the mounted life cycle. And that is it.

new Vue({
 render: (h) => h(App),
 mounted() {
   AOS.init()
 },
}).$mount('#app')

Animation Data options

After the setup of AOS into your app you just need to add some data-attribute (data-aos=”animation_name”) value in HTML elements for animation. AOS Animated library has some built-in options for animation:
1. Fade Animations effects:

fade, fade-up, fade-down, fade-left, fade-right, 
fade-up-right, fade-up-left, fade-down-right, fade-down-left

2. Slide Animations effects:

Slide-up, Slide-down, Slide-left, slide-right

3. Zoom Animations effects:

zoom-in, zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right, zoom-out, zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right

4. Flip Animation effects:

Flip-up, flip-down, flip-left, flip-right

No see how to use these data attributes in HTML

<div class="card" data-aos="fade-left">
 <p>Animated element using fade-left.</p>
</div>

In the above HTML, you can change the data-aos attribute with desired animation name.

Animation Duration

AOS library provides for every animation default duration of 400ms, but you can change it in data-aos-duration=’100’ as per your requirement for example you need to extend the duration of animation you just need to add this.

<div class="card" data-aos-duration="3000" data-aos="fade-left">
 <p>Animated element using fade-left with duration </p>
</div>

Animation Delay

AOS provides animation delay also like duration, for example, you want to run the animation after 1 second so so you need to add data-aos-delay=”1000” so AOS will run the animation on scroll after 1 second.

<div class="card" data-aos-delay="1000" data-aos-duration="3000" data-aos="fade-left">
 <p>Animated element using fade-left with duration and delay</p>
</div>

Data AOS Offset

AOS provides you more control over your animation if you think to animate an element when it scrolls 300 from the top just place the offset attribute and provide pixels vertically so it will run after defined pixels values.

<div class="card" data-aos-offset="200px" data-aos="fade-left">
 <p>Animated element using fade-left with offset.</p>
</div>

Data AOS ease-in

AOS provides more control over the timing function which specifies the speed curve of the animation.
To add this attribute you will be able to control and acceleration of animation speed up and slow down with any specific duration.

Easing functions:

linear, ease, ease-in, ease-out, ease-in-out, ease-in-back, ease-out-back, ease-in-out-back, ease-in-sine, ease-out-sine, ease-in-out-sine, ease-in-quad, ease-out-quad, ease-in-out-quad, ease-in-cubic, ease-out-cubic, ease-in-out-cubic, ease-in-quart, ease-out-quart, ease-in-out-quart

<div class="card" data-aos-easing="ease-in">
 <p>Animated element using easing</p>
</div>

Data AOS anchor-placement

By default AOS animation start when, the top of the element reaches the bottom of the window, so with the data-aos-anchor-placement attribute, you can change it with specific pre-defined values. Like the top-center, when the element top will be in the position of the center in the window the animation zoom-in will apply to it.

<div data-aos="zoom-in" data-aos-anchor-placement="top-center">
 <p>Animated element using zoom-in.</p>
</div>

Data-aos-anchor-placement functions

top-bottom, top-center, top-top, center-bottom, center-center, center-top, bottom-bottom, bottom-center, bottom-top

Data-aos-once

Animation replays when the web page scroll up or down by default, so you can set the value false to run the animation once.

<div data-aos="zoom-in" data-aos-once="false">
 <p>Animated element using zoom-in width dat-aos-once attribute.</p>
</div>

Conclusion

This article introduces animating the web page rather than static HTML. AOS library is providing control over the position, duration, and delay, it can be easily integrated into your vue.js app.

Written by

Ayaz Ali Shah

I am a skilled full-stack developer with extensive experience in creating and deploying large and small-scale applications. My expertise spans front-end and back-end technologies, along with database management and server-side programming.

Share on: