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
