DeAnimate

A jQuery lightweight plugin for Animation
See example with rotateIn

Front of Panel content rotateIn.

toggle card

Getting Started

Download the production version or the development version.

In your web page:

<style>
.front, .back {
    position: absolute;
    left: 0;
    top: 0;
}
</style>

<script src="jquery.js"></script>
<script src="dist/de-animate.min.js"></script>

<div id="myElement" class="card animated">
    <div class="back">
        <h3>Back of Panel flipInX</h3>
        <p>Panel content Flipped X</p>
    </div>
    <div class="front">
        <h3>Front of Panel flipInX</h3>
        <p>Panel content Flipped X</p>
    </div>
</div>

<script>
jQuery(function($){
    $('#myElement').deAnimate({
        trigger: 'click',
        classIn: 'rotateIn'
    });
});
</script>

Use API

$('#myElement').deAnimate({
    // 'click' or 'hover'
    trigger: string,

    // your animation name. 'flipInX', 'rotateIn', etc.
    classIn: string,

    // optional. default true. The animations of in and ou will
    // run in parallel or not
    parallel: boolean,

    // optional. default 500. Animation's speed in ms.
    speed: number,

    // front element selector. default 'auto'. If you choose 'auto',
    // the plugin will search for the first element with the classes
    // 'de-animate-front' or 'front' or the first child of the element
    front: 'auto',

    // back element selector. default 'auto'. If you choose 'auto',
    // the plugin will search for the first element with the classes
    // 'de-animate-back' or 'back' or the second child of the element
    back: 'auto'
});
Important!

If you'll use a composed class animation (like Animate.css ones), you must add the class animated to the element you want to animate.

Animate.css help

Animate.css has a lot of animations and you can check all of them at animate.css github page but here a some of them:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • fadeIn
  • fadeOut
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateOut
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomOut
  • slideInUp
  • slideOutUp

Examples

  • Flip / Rotate
    Front FlipInX

    Panel content Flip In X.

    toggle card
    Front FlipInY

    Panel content Flipped Y

    toggle card
    Front RotateIn

    Panel content Rotate

    toggle card
  • Fade
    Front FadeIn

    Panel content Fade In

    toggle card
    Front FadeInDown

    Panel content Fade In Down

    toggle card
    Front FadeInDownBig

    Panel content Fade In Down Big

    toggle card
    Front FadeInLeft

    Panel content Fade In Left

    toggle card
    Front FadeInLeftBig

    Panel content Fade In Left Big

    toggle card
    Front FadeInRight

    Panel content Fade In Right

    toggle card
    Front FadeInRightBig

    Panel content Fade In Right Big

    toggle card
    Front FadeInUp

    Panel content Fade In Up

    toggle card
    Front FadeInUpBig

    Panel content Fade In Up Big

    toggle card
  • Zoom
    Front ZoomIn

    Panel content Zoom In

    toggle card
    Front ZoomInLeft

    Panel content Zoom In Left

    toggle card
    Front ZoomInRight

    Panel content Zoom In Right

    toggle card
    Front ZoomInDown

    Panel content Zoom In Down

    toggle card
    Front ZoomInUp

    Panel content Zoom In Up

    toggle card
  • Bounce
    Front BounceIn

    Panel content Bounce In

    toggle card
    Front BounceInLeft

    Panel content Bounce In Left

    toggle card
    Front BounceInRight

    Panel content Bounce In Right

    toggle card
    Front BounceInDown

    Panel content Bounce In Down

    toggle card
    Front BounceInUp

    Panel content Bounce In Up

    toggle card
  • Others
    Front LightSpeedIn

    Panel content Light Speed In

    toggle card
    Front RollIn

    Panel content Roll In

    toggle card

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

  • v0.2.2 beta release
Fork me on GitHub
download the production version
download the development version
go to animate.css github page