Simple AOS (Animate On Scroll) In JavaScript

Preview:

Description:

A tiny and fast JavaScript AOS (Animate On Scroll) library that allows you to apply various types of CSS3 animations to elements when scrolled into view.

How to use it:

1. Add the Simple AOS Animation.js library to the web page.

<script src="Simple AOS Animation.js"></script>

2. Add content to be animated on scroll to the AOS container as follows:

<div class="aos_container" id="box1">
  <div class="aos_content"></div>
</div>
<div class="aos_container" id="box2">
  <div class="aos_content"></div>
</div>
<div class="aos_container" id="box3">
  <div class="aos_content"></div>
</div>

3. Setup the initial state of the AOS elements.

.container {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 100vh;
  background: #222;
  flex-wrap: wrap;
  overflow: hidden;
}
.container .aos_container .aos_content {
  position: relative;
  height: calc(1 * 350px);
  width: calc(1.4142 * 350px);
  margin: 20px;
  transition: .5s;
  transition-property: opacity, transform;
}
.container .aos_container .aos_content {
  opacity: 0;
}
.container .aos_container.active .aos_content {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate3d(0deg, 0deg, 0deg) scale(1) skew(0deg, 0deg);
}

4. Apply a CSS animation to each AOS content as follows:

.container #box1 .aos_content {
  background: indigo;
  transform: translateX(-200px);
}
.container #box2 .aos_content {
  background: #40DF30;
  transform: translateX(200px);
}
.container #box3 .aos_content {
  background: #2109EA;
  transform: scale(0);
}
...