Minimal Vanilla JS Animate on Scroll Library – AOS-Lite

AOS-Lite is an ultra-light JavaScript library that adds fade, slide, and opacity animations to elements as they enter the viewport.  You can control animation types, delays, and durations directly through HTML attributes.

How to use it:

1. Download and load the AOS-Lite’s JavaScript in the document.

<script src="animation.js" defer></script>

2. Specify the animation type for each element you want to animate using the data-aos attribute. You can also customize the animation with data-delay and data-duration attributes.

<div class="card" data-aos="fade-left" data-delay="300" data-duration="1000">
  <h2>Product A</h2>
  <p>Price: $100.000</p>
</div>
<div class="card" data-aos="fade-right" data-delay="500" data-duration="1000">
  <h2>Product B</h2>
  <p>Price: $150.000</p>
</div>
<div class="card" data-aos="fade-up" data-delay="700" data-duration="1000">
  <h2>Product C</h2>
  <p>Price: $200,000</p>
</div>
<div class="card" data-aos="fade-down" data-delay="700" data-duration="1000">
  <h2>Product C</h2>
  <p>Price: $200,000</p>
</div>
<div class="card" data-aos="opacity" data-delay="700" data-duration="1000">
  <h2>Product C</h2>
  <p>Price: $200,000</p>
</div>