De-animate

A jQuery lightweight plugin for Animation. Less than 5KB 😀

What's NEW ?

New settings were added, you can now animate by selector( By ID and class ) 😍 and you can do a simple validation of a form before animation.

Getting Started

Download the production version or the development version.

In your web page:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.2/jquery-migrate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" />
<script src="https://raw.githubusercontent.com/AAVision/de-animate/master/dist/jquery.de-animate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.1.9/sweetalert2.min.css" integrity="sha512-cyIcYOviYhF0bHIhzXWJQ/7xnaBuIIOecYoPZBgJHQKFPo+TOBA+BY1EnTpmM8yKDU4ZdI3UGccNGCEUdfbBqw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.1.9/sweetalert2.all.min.js" integrity="sha512-IZ95TbsPTDl3eT5GwqTJH/14xZ2feLEGJRbII6bRKtE/HC6x3N4cHye7yyikadgAsuiddCY2+6gMntpVHL1gHw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="card-1" class="card animated">
  <div class="back">
      Back of Panel content Flipped X
  </div>
  <div class="front">
      Front of Panel content Flipped X
  </div>
</div>
<script>
$(function() {
    $('#card-1').deAnimate({
        trigger: 'click', // 'hover', '#button', '.button'
        classIn: 'flipInX',
        parallel: false,
        form: '#form' // '.form' // optional
    });
});
</script>

Examples

To see more examples of how to use DeAnimate please check the demo directory or in our page

Building

Developers can easily build DeAnimate using NPM.

NPM

For the developers interested in building DeAnimate:

npm install

Bower

For developers not interested in building the DeAnimate library... use bower to install and use the DeAnimate distribution files.

Change to your project's root directory.

# To get the latest stable version, use Bower from the command line.
bower install de-animate

Release History

1.0.5 first release
0.2.2 beta release