hello and welcome to red stapler Channel in this tutorial we are going to show
you how to easily create an animation on any HTML element and the trigger on
scroll in just a few minutes using AOS library let's check it out
so here's the example page that we are going to work on I already added images
and make them stacked vertically then we're going to add a code to trigger the
animation when we scroll to each image now AOS is a library designed for
detecting and adding animation when scrolling the usage is very simple once
you have installed the library you will need to only add data-aos attribute to
the element you want to add animation AOS have lots of building animation
preset but you can also make a custom one if needed so let's install the
library using CDN first we are going to add the CSS into the head section then
add a JS at the end of the body then call AOS.init() method to initialize the
library then add the animation by adding data-aos attribute I'm going to add a
fade in effect to all images in the page
this is not to be confused with a lazy load because all the images will still
be loaded at the same time and not the scroll. AOS is working on the animation
only so you will need to handle the asynchronous load yourself now let's talk
about setting options AOS allows you to customize the animation properties such
as delay, offset or speed and there are two ways to change them first its global
option when you initialize the library you can add a setting object this
setting will be apply to our animations in that page second is individual option
you can add option attribute to the specific element that you want to
customize and that setting won't affect others for example the information will
start every time I scroll down but I want to change that behavior and play
the animation only once so I'm going to change the global setting
now let's pretend that I want to delay the animation of a specific image by two
seconds so I'm going to add data-aos-delay attribute for 2,000 milliseconds and
the next feature that I think it's very useful is using other elements as an
animation trigger for example you can make one element pop up after you scroll
to other elements so for demonstration I'm going to add a fixed position image
at the top left of the screen
now I'm going to make this image up here when I scroll to the seventh image let's
assign an ID to that trigger image and then add data-aos-anchor attribute to
point to that ID and that's the basic of the AOS library the library also offer
more advanced customization if you really need but personally I think the
building preset they have will cover most of the use case check the github project
page for more details I hope this tutorial is useful for you guys if you
want to see more development tips and tutorials like this video please
subscribe to stay tuned thanks watching and see you next time bye