Small JS Library For CSS3 Animations – Animate Display Property

Preview:

Description:

Animate Display Property is a small JavaScript plugin that allows you to apply CSS3 animations on a specific element.

Animations included:

• Fade
• Slide: Slide Left, Slide Right, Slide Up, Slide Down
• Zoom: Zoom In, Zoom Out
• Rotate: Rotate Left, Rotate Right
• Flip: Flip Up, Flip Down, Flip Right, Flip Left

How to use it:

Include the JavaScript ‘adp.js’ and stylesheet ‘adp.css’ on the web page.

<link rel="stylesheet" href="css/adp.min.css">
<script src="js/adp.min.js"></script>

Apply a CSS3 based Show animation of your choice to your element.

var el = document.querySelector('.el');
ADP.show(el, 'fade');

Apply a CSS3 based Hide animation of your choice to your element.

var el = document.querySelector('.el');
ADP.hide(el, 'fade');

Toggle the animation.

var el = document.querySelector('.el');
ADP.toggle(el, 'fade');

Execute a callback function when the animation is played.

var el = document.querySelector('.el');
ADP.toggle(el, 'fade', , function(state) {
  console.log('Callback fired with ' + state);
}););

Changelog:

v2.0.1 (11/21/2022)

• Fixed NPM audit issues.
• Changed license from GPLv3 to MIT.

v2.0.0 (08/31/2021)

• Added logic to cancel currently running animation if show is invoked when hide is being performed or vice versa.
• In callbacks, added state parameter which represents what happened to the element when show/hide was called.