Pause CSS Animations Until Elements Are Visible - Animate Visible

File Size: 5.81 KB
Views Total: 1435
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<script src="jquery.animateVisible.js"></script>

2. Apply a CSS animation to your element.

<div class="box">
.box {
  /* css animation rules here */

3. Call the plugin on the element. Done.


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

    up: true

5. Specify the scroll tolerance to trigger the animation.

    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.