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