Small JS Library For CSS3 Animations – Animate Display Property

Category: Animation , Javascript | December 29, 2017
Author:bilalshareef
Views Total:122 views
Official Page:Go to website
Last Update:December 29, 2017
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() {
  // doen
}););

You Might Be Interested In:


Leave a Reply