9 Scroll-triggered Animations For jQuery - jQuery EasyMotion

9 Scroll-triggered Animations For jQuery - jQuery EasyMotion
File Size: 3.38 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.