Trigger Animations On Elements On Scroll - jQuery animate-scroll.js

animate-scroll.js is an ultra-light jQuery scroll animation plugin that allows triggering custom CSS3 powered animations on elements when you scroll down the webpage. Great for displaying a snazzy revealing effect when the element is scrolled into view.

How to use it:

1. Add the data-as="true" attribute to any element you want to animated on scroll.

<section data-as="true">
  ...
</section>

2. Define the CSS classes that will be appended to the element while scrolling.

<section data-as="true"
         class="anime-start-1"
         data-as-animation="anime-end-1"
         >
  ...
</section>

3. Apply you own CSS animations to the element:

.anime-start-1 {
  opacity: 0;
  transform: translate3d(-100px, 0, 0);
  transition: .3s;
}

.anime-end-1 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

4. Load the latest version of jQuery library and the JavaScript file animate-scroll.js at the end of the html document.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/animate-scroll.js"></script>

---

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