jQuery Plugin To Apply Animations To Elements When Scrolled Into View - sapopin.js

sapopin.js is a lightweight jQuery based scroll animation plugin which uses CSS3 transforms to create and play animations on any elements when scrolled into view.

How to use it:

1. Load the jQuery sapopin.js script after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="scripts/sapopin.js"></script>

2. Customize the animations on elements as follows:

• First, you want to give each element a custom data-attribute data-sapopin. You can define the direction with by setting the attribute to left or right, or none, which would be from the bottom by default.
• Second is the amount of pixels to be scrolled in, i.e. how much the element travels.
• Third is the starting-opacity (Do you want it to fade in as well?)
• Fourth is the speed in seconds.

<section id="section-1" data-sapopin>
  ...
</section>

<section id="section-2" data-sapopin="left">
  ...
</section>

<section id="section-3" data-sapopin="right">
  ...
</section>

$(function(){saPopIn(50, 0.1, 0.3);});

---

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