Small JS Library For CSS3 Animations – Animate Display Property

Category: Animation , Javascript | November 21, 2022
Author:bilalshareef
Views Total:6 views
Official Page:Go to website
Last Update:November 21, 2022
License:MIT

Preview:

Small JS Library For CSS3 Animations – Animate Display Property

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.

You Might Be Interested In:


Leave a Reply