Pause CSS Animations Until Elements Are Visible - Animate Visible

Animate Visible is a jQuery plugin for scroll-triggered animations that pause the CSS animations on your element until it is scrolled into view.

Works with window load, resize, and scroll events.

How it works:

• If the tolerance is less than 1, assume that it is a proportion of the element height and not a pixel value.
• Is the element above the bottom of the viewport?
• If we are checking for visibility on scroll up as well, check whether the element is below the top of the viewport.
• If the element is visible, play the animation.

How to use it:

1. Load the jQuery Animate Visible plugin after jQuery (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous">
</script>
<script src="jquery.animateVisible.js"></script>

2. Apply a CSS animation to your element.

<div class="box">
  ...
</div>

.box {
  /* css animation rules here */
}

3. Call the plugin on the element. Done.

$(function(){
  $('.swing').animateVisible();
});

4. Decide whether to play the CSS animation on scroll up.

$(function(){
  $('.swing').animateVisible({
    up: true
  });
});

5. Specify the scroll tolerance to trigger the animation.

$(function(){
  $('.swing').animateVisible({
    tolerance: 0.5 // half of the element
  });
});

---

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