Animate On Scroll Webpage with AOS library

Preview

1-Setup AOS library

to get the animate on scroll effect we have to use AOS library

• you have to add style in head

  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

• Just before closing the body tag, add a script

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

2- How to use it

just go to the element you want to animate it on scroll and set data-aos attribute

  <div data-aos="fade-in"></div>

• you can also adjust it by using data-aos-* attributes :

  <div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

Nevertheless, if you are interested to use this library, you can go to : https://github.com/michalsnik/aos

Thank you for reading this article. If you have a suggestion for an article and you want me to talk about it, be sure to mention it in the comments.