- var animate               = true;
- var page_animate          = true;
- var theme_customizer      = true;
- var tooltip               = true;

doctype html
html(lang='en')
    include ../../components/header-files
    body
        include ../../components/loader
        // page-wrapper Start
        #pageWrapper.page-wrapper
            include ../../components/header
            // Page Body Start
            .page-body-wrapper.horizontal-menu
                include ../../components/sidebar
                .page-body
                    .container-fluid
                        .page-header
                            .row
                                .col-sm-6
                                    h3
                                        | Animate
                                    ol.breadcrumb
                                        li.breadcrumb-item
                                            a(href='index.html')
                                              | Home
                                        li.breadcrumb-item Animation
                                        li.breadcrumb-item.active Animate
                                .col-sm-6
                                    include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                        .row
                          .col-sm-12
                            .card
                              .card-body
                                .row
                                  .col-xl-6.col-md-8.offset-xl-3.offset-md-2
                                    #animation-box
                                      .card
                                        .animate-widget
                                          div
                                            img.img-fluid(src='../assets/images/banner/3.jpg', alt='')
                                          .text-center.p-25
                                            p.text-muted.mb-0
                                              | Denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings
                                    form.theme-form.text-center
                                      .form-group
                                        select.form-control.input.input--dropdown.js-animations
                                          optgroup(label='Attention Seekers')
                                            option(value='bounce') bounce
                                            option(value='flash') flash
                                            option(value='pulse') pulse
                                            option(value='rubberBand') rubberBand
                                            option(value='shake') shake
                                            option(value='swing') swing
                                            option(value='tada') tada
                                            option(value='wobble') wobble
                                            option(value='jello') jello
                                          optgroup(label='Bouncing Entrances')
                                            option(value='bounceIn') bounceIn
                                            option(value='bounceInDown') bounceInDown
                                            option(value='bounceInLeft') bounceInLeft
                                            option(value='bounceInRight') bounceInRight
                                            option(value='bounceInUp') bounceInUp
                                          optgroup(label='Bouncing Exits')
                                            option(value='bounceOut') bounceOut
                                            option(value='bounceOutDown') bounceOutDown
                                            option(value='bounceOutLeft') bounceOutLeft
                                            option(value='bounceOutRight') bounceOutRight
                                            option(value='bounceOutUp') bounceOutUp
                                          optgroup(label='Fading Entrances')
                                            option(value='fadeIn') fadeIn
                                            option(value='fadeInDown') fadeInDown
                                            option(value='fadeInDownBig') fadeInDownBig
                                            option(value='fadeInLeft') fadeInLeft
                                            option(value='fadeInLeftBig') fadeInLeftBig
                                            option(value='fadeInRight') fadeInRight
                                            option(value='fadeInRightBig') fadeInRightBig
                                            option(value='fadeInUp') fadeInUp
                                            option(value='fadeInUpBig') fadeInUpBig
                                          optgroup(label='Fading Exits')
                                            option(value='fadeOut') fadeOut
                                            option(value='fadeOutDown') fadeOutDown
                                            option(value='fadeOutDownBig') fadeOutDownBig
                                            option(value='fadeOutLeft') fadeOutLeft
                                            option(value='fadeOutLeftBig') fadeOutLeftBig
                                            option(value='fadeOutRight') fadeOutRight
                                            option(value='fadeOutRightBig') fadeOutRightBig
                                            option(value='fadeOutUp') fadeOutUp
                                            option(value='fadeOutUpBig') fadeOutUpBig
                                          optgroup(label='Flippers')
                                            option(value='flip') flip
                                            option(value='flipInX') flipInX
                                            option(value='flipInY') flipInY
                                            option(value='flipOutX') flipOutX
                                            option(value='flipOutY') flipOutY
                                          optgroup(label='Lightspeed')
                                            option(value='lightSpeedIn') lightSpeedIn
                                            option(value='lightSpeedOut') lightSpeedOut
                                          optgroup(label='Rotating Entrances')
                                            option(value='rotateIn') rotateIn
                                            option(value='rotateInDownLeft') rotateInDownLeft
                                            option(value='rotateInDownRight') rotateInDownRight
                                            option(value='rotateInUpLeft') rotateInUpLeft
                                            option(value='rotateInUpRight') rotateInUpRight
                                          optgroup(label='Rotating Exits')
                                            option(value='rotateOut') rotateOut
                                            option(value='rotateOutDownLeft') rotateOutDownLeft
                                            option(value='rotateOutDownRight') rotateOutDownRight
                                            option(value='rotateOutUpLeft') rotateOutUpLeft
                                            option(value='rotateOutUpRight') rotateOutUpRight
                                          optgroup(label='Sliding Entrances')
                                            option(value='slideInUp') slideInUp
                                            option(value='slideInDown') slideInDown
                                            option(value='slideInLeft') slideInLeft
                                            option(value='slideInRight') slideInRight
                                          optgroup(label='Sliding Exits')
                                            option(value='slideOutUp') slideOutUp
                                            option(value='slideOutDown') slideOutDown
                                            option(value='slideOutLeft') slideOutLeft
                                            option(value='slideOutRight') slideOutRight
                                          optgroup(label='Zoom Entrances')
                                            option(value='zoomIn') zoomIn
                                            option(value='zoomInDown') zoomInDown
                                            option(value='zoomInLeft') zoomInLeft
                                            option(value='zoomInRight') zoomInRight
                                            option(value='zoomInUp') zoomInUp
                                          optgroup(label='Zoom Exits')
                                            option(value='zoomOut') zoomOut
                                            option(value='zoomOutDown') zoomOutDown
                                            option(value='zoomOutLeft') zoomOutLeft
                                            option(value='zoomOutRight') zoomOutRight
                                            option(value='zoomOutUp') zoomOutUp
                                          optgroup(label='Specials')
                                            option(value='hinge') hinge
                                            option(value='jackInTheBox') jackInTheBox
                                            option(value='rollIn') rollIn
                                            option(value='rollOut') rollOut
                                      button.js-triggeraNimation.btn.btn-primary Animate it
                          .col-sm-12
                            .card
                              .card-header.pb-0
                                h5 How to use it?
                                span
                                  | All you have to do is to add animation name class attribute to html element, like :
                                  code Fade
                              .card-body.options.animat-md-center
                                div flash
                                div pulse
                                div rubberBand
                                div shake
                                div swing
                                div tada
                                div wobble
                                div jello
                                div bounceIn
                                div bounceInDown
                                div bounceInLeft
                                div bounceInRight
                                div bounceInUp
                                div bounceOut
                                div bounceOutDown
                                div bounceOutLeft
                                div bounceOutRight
                                div bounceOutUp
                                div bounceOut
                                div bounceOutDown
                                div bounceOutLeft
                                div bounceOutRight
                                div bounceOutUp
                                div fadeOut
                                div fadeOutDown
                                div fadeOutDownBig
                                div fadeOutLeft
                                div fadeOutLeftBig
                                div fadeOutRight
                                div fadeOutRightBig
                                div fadeOutUp
                                div fadeOutUpBig
                                div flip
                                div flipInX
                                div flipInY
                                div flipOutX
                                div flipOutY
                                div lightSpeedIn
                                div lightSpeedOut
                                div rotateIn
                                div rotateInDownLeft
                                div rotateInDownRight
                                div rotateInUpLeft
                                div rotateInUpRight
                                div rotateOut
                                div rotateOutDownLeft
                                div rotateOutDownRight
                                div rotateOutUpLeft
                                div rotateOutUpRight
                                div slideInUp
                                div slideInDown
                                div slideInLeft
                                div slideInRight
                                div slideOutUp
                                div slideOutDown
                                div slideOutLeft
                                div slideOutRight
                                div zoomIn
                                div zoomInDown
                                div zoomInLeft
                                div zoomInRight
                                div zoomInUp
                                div zoomOut
                                div zoomOutDown
                                div zoomOutLeft
                                div zoomOutRight
                                div zoomOutUp
                                div hinge
                                div jackInTheBox
                                div rollIn
                                div rollOut
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files      
