DeAnimate

A jQuery lightweight plugin for Animation
See example with

Back of Panel content .

toggle card
See example with

Front of Panel content .

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
    Back FlipInX

    Panel content Flip In X.

    toggle card
    Front FlipInX

    Panel content Flip In X.

    toggle card
    Back FlipInY

    Panel content Flipped Y

    toggle card
    Front FlipInY

    Panel content Flipped Y

    toggle card
    Back RotateIn

    Panel content Rotate

    toggle card
    Front RotateIn

    Panel content Rotate

    toggle card
  • Fade
    Back FadeIn

    Panel content Fade In

    toggle card
    Front FadeIn

    Panel content Fade In

    toggle card
    Back FadeInDown

    Panel content Fade In Down

    toggle card
    Front FadeInDown

    Panel content Fade In Down

    toggle card
    Back FadeInDownBig

    Panel content Fade In Down Big

    toggle card
    Front FadeInDownBig

    Panel content Fade In Down Big

    toggle card
    Back FadeInLeft

    Panel content Fade In Left

    toggle card
    Front FadeInLeft

    Panel content Fade In Left

    toggle card
    Back FadeInLeftBig

    Panel content Fade In Left Big

    toggle card
    Front FadeInLeftBig

    Panel content Fade In Left Big

    toggle card
    Back FadeInRight

    Panel content Fade In Right

    toggle card
    Front FadeInRight

    Panel content Fade In Right

    toggle card
    Back FadeInRightBig

    Panel content Fade In Right Big

    toggle card
    Front FadeInRightBig

    Panel content Fade In Right Big

    toggle card
    Back FadeInUp

    Panel content Fade In Up

    toggle card
    Front FadeInUp

    Panel content Fade In Up

    toggle card
    Back FadeInUpBig

    Panel content Fade In Up Big

    toggle card
    Front FadeInUpBig

    Panel content Fade In Up Big

    toggle card
  • Zoom
    Back ZoomIn

    Panel content Zoom In

    toggle card
    Front ZoomIn

    Panel content Zoom In

    toggle card
    Back ZoomInLeft

    Panel content Zoom In Left

    toggle card
    Front ZoomInLeft

    Panel content Zoom In Left

    toggle card
    Back ZoomInRight

    Panel content Zoom In Right

    toggle card
    Front ZoomInRight

    Panel content Zoom In Right

    toggle card
    Back ZoomInDown

    Panel content Zoom In Down

    toggle card
    Front ZoomInDown

    Panel content Zoom In Down

    toggle card
    Back ZoomInUp

    Panel content Zoom In Up

    toggle card
    Front ZoomInUp

    Panel content Zoom In Up

    toggle card
  • Bounce
    Back BounceIn

    Panel content Bounce In

    toggle card
    Front BounceIn

    Panel content Bounce In

    toggle card
    Back BounceInLeft

    Panel content Bounce In Left

    toggle card
    Front BounceInLeft

    Panel content Bounce In Left

    toggle card
    Back BounceInRight

    Panel content Bounce In Right

    toggle card
    Front BounceInRight

    Panel content Bounce In Right

    toggle card
    Back BounceInDown

    Panel content Bounce In Down

    toggle card
    Front BounceInDown

    Panel content Bounce In Down

    toggle card
    Back BounceInUp

    Panel content Bounce In Up

    toggle card
    Front BounceInUp

    Panel content Bounce In Up

    toggle card
  • Others
    Back LightSpeedIn

    Panel content Light Speed In

    toggle card
    Front LightSpeedIn

    Panel content Light Speed In

    toggle card
    Back RollIn

    Panel content Roll 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