This content originally appeared on DEV Community and was authored by Tapajyoti Bose
What is AOS?
As front-end developer, a popular request you might get from your clients is to implement stunning animation effects on page scroll. AOS (Animate on Scroll) is the most popular library for the purpose of making this task easier for us.
AOS is a library developed by Michał Sajnóg and it does exactly what its name suggests: it lets you apply different kinds of animations to elements as they scroll into view.
To see an example of a project using AOS, click here.
Demo
The animation effects available by default are shown below.
NOTE: The animations can be further customized using the various properties like data-aos-duration.
Installing AOS
AOS can be installed using Bower or npm.
Bower:
bower install aos --save
npm:
npm install aos --save
Next, link AOS styles and scripts:
<link rel="stylesheet" href="bower_components/aos/dist/aos.css">
<script src="bower_components/aos/dist/aos.js"></script>
AOS stylesheet and JavaScript files can also be downloaded using a CDN as follows:
CSS:
<link href="https://cdn.rawgit.com/michalsnik/aos/2.3.4/dist/aos.css" rel="stylesheet">
JavaScript:
<script src="https://cdn.rawgit.com/michalsnik/aos/2.3.4/dist/aos.js"></script>
To initialize AOS, just use the line below in the JavaScript file.
AOS.init();
Using AOS
After the setup, just add data-aos="<animation-name>" to the HTML elements to use basic animations. For example
<div data-aos="fade-up">
...
</div>
<div data-aos="flip-down">
...
</div>
<div data-aos="zoom-in">
...
</div>
Configuring the Animation
Additional properties can be used to configure the animations:
-
data-aos-delay: You can use this attribute to specify the delay of the animation play time. The duration value can be anywhere between0and3000with steps of50ms. Since the duration is handled in CSS, using smaller steps or a wider range would have unnecessarily increased the size of the CSS code. The default value for this attribute is0. -
data-aos-offset: You can use this attribute to trigger the animation sooner or later than the designated time. Its default value is120px. -
data-aos-duration: You can use this attribute to specify the duration of the animation. The duration value can be anywhere between50and3000with steps of50ms. Since the duration is handled in CSS, using smaller steps or a wider range would have unnecessarily increased the size of the CSS code. This range should be sufficient for almost all animations. The default value for this attribute is400. -
data-aos-easing: You can use this attribute to control the timing function for animating different elements. Possible (not exhaustive) values are:linear,ease-in-outandease-out-quart -
data-aos-anchor: This attribute is useful when you want to trigger the animation based on the position of some other element. It accepts any selector as its value. The default value isnull. This means that all the animations will be triggered with respect to the element’s own position. -
data-aos-anchor-placement: By default, the animations on an element are applied as soon as its top part reaches the bottom part of the window. This behavior can be changed using thedata-aos-anchor-placementattribute. As its value, this attribute accepts two words separated by a hyphen. For example, you can set it totop-bottom,top-centerortop-top. Three such combinations are also possible for both thecenterandbottomvalues. -
data-aos-once: You can also control if the animations should be played only when you get to a particular element the first time or every time you scroll up or down. By default, the animations are replayed every time the elements scroll into view. You can set the value of this attribute totruein order to animate the elements only once.
Adding Custom Animations
Sometimes built-in animations are just not enough. Let's create an animation depending on the resolution of the screen. Here's one approach to do it:
style.css
[data-aos="new-animation"] {
opacity: 0;
transition-property: transform, opacity;
}
[data-aos="new-animation"].aos-animate {
opacity: 1;
}
@media screen and (min-width: 768px) {
[data-aos="new-animation"] {
transform: translateX(100px);
}
[data-aos="new-animation"].aos-animate {
transform: translateX(0);
}
}
Then use it in HTML:
<div data-aos="new-animation"></div>
The element will only animate opacity on mobile devices, but from 768px width it'll also slide from right to left.
Reference
Thanks for reading
Reach out to me on:
This content originally appeared on DEV Community and was authored by Tapajyoti Bose
Tapajyoti Bose | Sciencx (2021-04-11T03:42:20+00:00) Create the Ultimate User Experience with AOS (Animate on Scroll). Retrieved from https://www.scien.cx/2021/04/11/create-the-ultimate-user-experience-with-aos-animate-on-scroll/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.