Handling CSS Based Animations Using JavaScript - ripley

ripley is a super tiny JavaScript plugin to handle CSS powered animations by toggling given CSS properties with configurable easing function, transition delay, and animation speed.

How to use it:

1. Load the JavaScript ripley.js in the document (jQuery is optional).

<!-- As a Vanilla JS plugin -->
<script src="ripley.js"></script>
<!-- As a jQuery plugin -->
<script src="jquery.js"></script>
<script src="ripley.js"></script>

2. Initialize the plugin on the target element and define the CSS property & value for the animation.

// Vanilla JS
let rply = new Ripley(document.querySelector('#element'));
rply.animate('opacity', '0.25');

// jQuery
$('#element').ripley('opacity', '0.25');

3. Customize the animation speed in seconds.

// Vanilla JS
let rply = new Ripley(document.querySelector('#element'));
rply.animate('opacity', '0.25',{
  speed: 0.5
});

// jQuery
$('#element').ripley('opacity', '0.25',{
  speed: 0.5
});

4. Apply an easing function to the animation.

// Vanilla JS
let rply = new Ripley(document.querySelector('#element'));
rply.animate('opacity', '0.25',{
  ease: 'ease-out'
});

// jQuery
$('#element').ripley('opacity', '0.25',{
  ease: 'ease-out'
});

5. Set the time to wait before triggering the animation.

// Vanilla JS
let rply = new Ripley(document.querySelector('#element'));
rply.animate('opacity', '0.25',{
  delay: 0
});

// jQuery
$('#element').ripley('opacity', '0.25',{
  delay: 0
});

Changelog:

2020-04-24

• v1.1

---

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