DeAnimate
A jQuery lightweight plugin for Animation
Back of Panel content .
Front of Panel content .
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 FlipInXPanel content Flip In X.
toggle cardFront FlipInXPanel content Flip In X.
toggle cardBack FlipInYPanel content Flipped Y
toggle cardFront FlipInYPanel content Flipped Y
toggle cardBack RotateInPanel content Rotate
toggle cardFront RotateInPanel content Rotate
toggle card -
Fade
Back FadeInPanel content Fade In
toggle cardFront FadeInPanel content Fade In
toggle cardBack FadeInDownPanel content Fade In Down
toggle cardFront FadeInDownPanel content Fade In Down
toggle cardBack FadeInDownBigPanel content Fade In Down Big
toggle cardFront FadeInDownBigPanel content Fade In Down Big
toggle cardBack FadeInLeftPanel content Fade In Left
toggle cardFront FadeInLeftPanel content Fade In Left
toggle cardBack FadeInLeftBigPanel content Fade In Left Big
toggle cardFront FadeInLeftBigPanel content Fade In Left Big
toggle cardBack FadeInRightPanel content Fade In Right
toggle cardFront FadeInRightPanel content Fade In Right
toggle cardBack FadeInRightBigPanel content Fade In Right Big
toggle cardFront FadeInRightBigPanel content Fade In Right Big
toggle cardBack FadeInUpPanel content Fade In Up
toggle cardFront FadeInUpPanel content Fade In Up
toggle cardBack FadeInUpBigPanel content Fade In Up Big
toggle cardFront FadeInUpBigPanel content Fade In Up Big
toggle card -
Zoom
Back ZoomInPanel content Zoom In
toggle cardFront ZoomInPanel content Zoom In
toggle cardBack ZoomInLeftPanel content Zoom In Left
toggle cardFront ZoomInLeftPanel content Zoom In Left
toggle cardBack ZoomInRightPanel content Zoom In Right
toggle cardFront ZoomInRightPanel content Zoom In Right
toggle cardBack ZoomInDownPanel content Zoom In Down
toggle cardFront ZoomInDownPanel content Zoom In Down
toggle cardBack ZoomInUpPanel content Zoom In Up
toggle cardFront ZoomInUpPanel content Zoom In Up
toggle card -
Bounce
Back BounceInPanel content Bounce In
toggle cardFront BounceInPanel content Bounce In
toggle cardBack BounceInLeftPanel content Bounce In Left
toggle cardFront BounceInLeftPanel content Bounce In Left
toggle cardBack BounceInRightPanel content Bounce In Right
toggle cardFront BounceInRightPanel content Bounce In Right
toggle cardBack BounceInDownPanel content Bounce In Down
toggle cardFront BounceInDownPanel content Bounce In Down
toggle cardBack BounceInUpPanel content Bounce In Up
toggle cardFront BounceInUpPanel content Bounce In Up
toggle card -
Others
Back LightSpeedInPanel content Light Speed In
toggle cardFront LightSpeedInPanel content Light Speed In
toggle cardBack RollInPanel content Roll In
toggle cardFront RollInPanel content Roll In
toggle card
Building
Developers can easily build DeAnimate using NPM.
NPM
For the developers interested in building DeAnimate:
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.
bower install de-animate
Release History
- v0.2.2 beta release