jQuery Plugin For Scroll Triggered Fade/Slide Animations - ScrollAnimate

A tiny and performant animate on scroll jQuery plugin that applies a smooth fade or slide animation to elements when the user scrolls down to a specified position of the page.

It uses the 'throttle' function from the Underscore.js library to offer smooth and optimized animation performance.

How to use it:

1. Load the necessary jQuery and jQuery UI libraries (for animations & extra easing function) in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2. Download and load the jQuery ScrollAnimate plugin after jQuery.

<script src="/path/to/jquery.scrollanimate.min.js"></script>

3. Add the following HTML data attributes to the target element which will be animated on scroll.

• data-show: starts the animation at this point
• data-hide: ends the animation at this point
• data-animation: animation type: 'fade', 'slide', 'slide-left', or 'slide-right'

<div class="box" 
     data-show="200" 
     data-hide="400" 
     data-animation="fade">
     Fade Animation
</div>

<!-- OR -->
<div class="box" 
     data-show="50%" 
     data-hide="70%" 
     data-amination="slide">
     Slide Animation
</div>

4. Hide the element on page load.

.box {
  display: none;
  /* more styles here */
}

5. Invoke the plugin with settings.

$('.box').scrollAnimate({
  // config the animation here
  throttle: 50,
  duration: 300,
  easing: "swing"
});

---

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