Animate In Elements On Scroll Using jQuery And CSS3

A tiny and simple-to-use AOS (Animate On Scroll) script that triggers slide in and fade in animations on elements when scrolling towards them.

It uses jQuery to detect if specific elements are scrolled into view and apply the CSS class is-show to them. As a result, you can create your own scroll animations using CSS3.

How to use it:

1. Add your element to animate on scroll in a container element with the CSS class of js-fade-animation.

<div class="js-fade-animation demo">
  <img src="image-to-animate.jpg"" alt="" />
</div>

2. Load the necessary jQuery library and jQuery throttle-debounce in the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/jquery.ba-throttle-debounce.min.js"></script>

3. Load the main AOS plugin's script after jQuery.

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

4. Apply CSS3 powered animations to the image when it is scrolled into view.

.demo {
  width: 50%;
  margin: 10px;
  transform: translateX(50%);
  opacity: 0;
  transition: all 0.75s ease-in-out 0.5s;
}

.demo.is-show {
  transform: translateX(0);
  opacity: 1;
}

5. This example shows how to animate a list of pictures sequentially when scrolling down the page.

<ul class="js-fade-animation list">
  <li class="item">
    <img src="1.jpg" alt="">
  </li>
  <li class="item">
    <img src="2.jpg" alt="">
  </li>
  <li class="item">
    <img src="3.jpg" alt="">
  </li>
</ul>

.list {
  display: flex;
  justify-content: space-between;
  list-style: none;
}

.item {
  margin: 10px;
  transform: translateX(50%);
  opacity: 0;
}

.item:nth-child(1) {
  transition: all 0.75s ease-in-out 0.5s;
}

.item:nth-child(2) {
  transition: all 0.75s ease-in-out 0.75s;
}

.item:nth-child(3) {
  transition: all 0.75s ease-in-out 1s;
}

.list.is-show .item {
  transform: translateX(0);
  opacity: 1;
}

---

This awesome jQuery plugin is developed by it-web-life. For more Advanced Usages, please check the demo page or visit the official website.