Skip to content

Latest commit

 

History

History
76 lines (52 loc) · 4.81 KB

README.md

File metadata and controls

76 lines (52 loc) · 4.81 KB
Raw

Animate.js

Every feedback is welcome!

animate.js is a simple javascript library to animate any html element

Demo

Animate.js DEMO ***

Installation

Download animate.min.js in dist folder:

$ dist/animate.min.js

Usage

To use Animate.js in your website, simply drop the javascript into your document's <body>

<body>
  <div id="domElement"></div>
  <!-- -->
  <script src="dist/animate.min.js"></script>
</body>

or use with jquery

<body>
  <!-- -->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="dist/animate.min.js"></script>
</body>

Available Animator (89)

bounce flash pulse headShake wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOutDown fadeOutDownBig fadeOutLeftBig fadeOutRightBig fadeOutUp fadeOutUpBig flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight jackInTheBox rollIn rollOut zoomInDown zoomInLeft zoomInRight zoomInUp zoomOutDown zoomOutLeft zoomOutRight zoomOutUp slideInDown slideInLeft slideInRight slideInUp slideOutDown slideOutLeft slideOutRight slideOutUp heartBeat rollOutRight rollOutLeft rubberBand zoomOut zoomIn fadeOut fadeOutRight fadeOutLeft fadeOutTop fadeOutBottom horizontalFlip verticalFlip bounceOutBottom bounceOutTop bounceOutLeft bounceOutRight rotateClockwise rotateAntiClockwise tada moveIn moveOut swing shake hinge
bounce flash pulse headShake wobble jello bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOutDown fadeOutDownBig fadeOutLeftBig fadeOutRightBig fadeOutUp fadeOutUpBig flipInX flipInY flipOutX flipOutY lightSpeedIn lightSpeedOut rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight jackInTheBox rollIn rollOut zoomInDown zoomInLeft zoomInRight zoomInUp zoomOutDown zoomOutLeft zoomOutRight zoomOutUp slideInDown slideInLeft slideInRight slideInUp slideOutDown slideOutLeft slideOutRight slideOutUp heartBeat rollOutRight rollOutLeft rubberBand zoomOut zoomIn fadeOut fadeOutRight fadeOutLeft fadeOutTop fadeOutBottom horizontalFlip verticalFlip bounceOutBottom bounceOutTop bounceOutLeft bounceOutRight rotateClockwise rotateAntiClockwise tada moveIn moveOut swing shake hinge

Example:

let domElement = document.getElementById("elementId");
domElement.bounce();

It's possible to change the duration of your animations :

let domElement = document.querySelector("element");
domElement.bounce(700);

Usage with jQuery:

$(".button").flash();
// $(".button").flash(900);
// $(".button")[2].flash();
$("#domElement").jello();

License

Animate.js is licensed under the MIT license. (https://opensource.org/licenses/MIT)

Author

koffiisen