9 Scroll-triggered Animations For jQuery - jQuery EasyMotion

EasyMotion is a small and easy-to-use jQuery plugin for implementing scroll-triggered and CSS3 powered animations on elements within the document.

The plugin detects the scroll event and applies a specific animation to your element once it comes into view.

How to use it:

1. load the jQuery EasyMotion plugin's script 'easymotion.js' after loading the latest jQuery library (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="easymotion.js"></script>

2. Add an animation of your choice to the element using the animation attribute. All possible animations:

• fade: fade in animation
• left-to-right: left ro right
• right-to-left: right to left
• bottom-to-top: bottom to top
• top-to-bottom: top to bottom
• rotate: anticlockwise rotation
• rotate-c: clockwise rotation
• scale: scale
• scale-rotate: scale+rotate

<div class="box" 
     animation="scale-rotate">
     <h3>jQuery Script<h3>
</div>

3. Specify the duration of the scroll animation using the animation-time attribute:

<div class="box" 
     animation="scale-rotate"
     animation-time="2500">
     <h3>jQuery Script<h3>
</div>

4. Specify the offset at which point to trigger the animation.

<div class="box" 
     animation="scale-rotate"
     animation-offset="300">
     <h3>jQuery Script<h3>
</div>

Changelog:

2018-05-29

• v0.0.8

---

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