jQuery Plugin For Scroll Triggered Fade/Slide Animations - ScrollAnimate

File Size: 21.8 KB
Views Total: 740
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" 
     Fade Animation

<!-- OR -->
<div class="box" 
     Slide Animation

4. Hide the element on page load.

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

5. Invoke the plugin with settings.

  // 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.