Introduction:
In order to make your online application more engaging and interactive than merely a static page, animations are employed. Users are more likely to interact with your application’s features when there are animations present. The on-scroll animation is one of the greatest to have on your website. An example of scroll telling, which is the act of narrating a narrative or presenting material while scrolling, is an on-scroll animation.
Without the aid of certain scroll animation libraries, it might be challenging to develop on-scroll animation on a website. These libraries offer a straightforward user interface for designing various scroll interactions that enhance the user experience. You may build animations easily and gracefully using the Animate on Scroll (AOS) library.
You will learn about the Animate On Scroll (AOS) Library, how to utilize it in your Vue apps, and its various use cases in this article. We’ll utilize the AOS Library to create an animated landing page in Vue as well.
Get Started:
Step 1: Set up your Vue project.
Let’s launch a Vue application first by setting up the vue CLI:
The Vue command-line interface (CLI) must first be installed:
npm install -g @vue/cli
then use the following command to create the Vue app:
vue create aos-animation
After completing these steps, our vue application has been successfully constructed; now, use cd aos-animation to change to its repository and run the following command to launch it.
npm run serve
Step 2: Install AOS In Your Project.
Install using npm.
npm install aos --save
Then import AOS in your main.js file.
import AOS from 'aos' import 'aos/dist/aos.css'
new Vue({
render: h => h(App),
mounted() {
AOS.init()
},
}).$mount('#app')
Step 3: Animation Configuration.
All that’s left to do is add some particular attributes, data-aos=”animation name,” to your HTML elements in your animation template once the setup is finished. There are some predefined options for the animations in the AOS Library, including:
- Fade animations
- Flip animations
- Slide animations
- Zoom animations
You can also check the full list of animations by clicking here
You may easily apply any animation you use to the HTML components in your templates.
<div class="animation" data-aos="fade-left"> <p>Animated element by faded left.</p> </div>
Animation Configuration Using AOS Data Attributes.
The ability to customize the animation using AOS Data Attributes, which let you tailor your animations to your preferences, is one special feature of the AOS library. The following are the many characteristics:
data-aos-duration
Every animation has a predetermined length of time, and AOS gives it a default duration of 400ms. For this characteristic to be used, your values must range from 0 to 3000 with a 50ms step.
<div class="animation" data-aos="fade-left" data-aos-duration="1000"> <p>Animated element by faded left.</p> </div>
data-aos-delay
This feature allows you to specify how long you want your animation to be delayed. AOS offers a 50ms default duration. For this characteristic to be used, your values must range from 0 to 3000 with a 50ms step.
<div class="animation" data-aos="fade-left" data-aos-delay="250"> <p>Animated element by faded left.</p> </div>
data-aos-offset
This feature allows you to start or stop the animation before or after the specified time. AOS offers a 120px default setting.
<div class="animation" data-aos="fade-left" data-aos-offset="250px"> <p>Animated element by faded left.</p> </div>
data-aos-easing
This AOS characteristic allows you to control and alter the acceleration of an animation, defining where the animation speeds up and slows down during the defined length. The timing function, which determines the speed curve of the animation, is controlled by this attribute. For your CSS animations, the attribute uses the same values for linear, ease, ease-in, ease-out, and ease-in-out. The whole range of possible values is shown here.
<div class="animation" data-aos="fade-left" data-aos-easing="ease-in-out"> <p>Animated element by faded left.</p> </div>
data-aos-once
Every time animation in the AOS library scrolls into or out of view, it is by default replayed. If you want the element to animate only once, you can set the value of this attribute to false.
<div class="animation" data-aos="fade-left" data-aos-once="false"> <p>Animated element by faded left.</p> </div>
Check more AOS configuration attributes by clicking here.
