mostafa amine
mostafaamine

mostafaamine

Animate On Scroll Webpage with AOS library

Animate On Scroll Webpage with AOS library

mostafa amine
·Feb 21, 2022·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

Table of contents

  • 1-Setup AOS library
  • 2- How to use it

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.

 
Share this