- var theme_customizer      = true;
- var tooltip               = true;
- var photo_swipe           = true;
- var isotope               = true;
- var wow                   = true;
- var page_wow              = true;
- var animate               = 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
                                      | Wow Animation
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                         | Home
                                      li.breadcrumb-item Animation
                                      li.breadcrumb-item.active Wow Animation
                                .col-sm-6
                                  include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                      .row
                        .col-sm-12
                          .card
                            .card-header.pb-0
                              h5 WOW Example animation
                            .card-body
                              #aniimated-thumbnials.row.gallery.grid.my-gallery(itemscope='')
                                  figure.grid-item.col-md-3.col-6.wow.rollIn(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='')
                                    a(href='assets/images/big-masonry/1.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/1.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  1
                                  figure.grid-item.col-md-3.col-6.wow.bounceInDown.center(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='')
                                    a(href='assets/images/big-masonry/2.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/2.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  2
                                  figure.grid-item.col-md-3.col-6.wow.lightSpeedIn(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='')
                                    a(href='assets/images/big-masonry/3.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/3.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  3
                                  figure.grid-item.col-md-3.col-6.wow.rollIn.center(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/4.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/4.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  4
                                  figure.grid-item.col-md-3.col-6.wow.pulse(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.15s', itemscope='')
                                    a(href='assets/images/big-masonry/5.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/5.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  5
                                  figure.grid-item.col-md-3.col-6.wow.bounceInRight.center(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/6.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/6.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  6
                                  figure.grid-item.col-md-3.col-6.wow.bounceInLeft(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/7.jpg', itemprop='contentUrl', data-size='11600x950')
                                      img.img-thumbnail(src='assets/images/masonry/7.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  7
                                  figure.grid-item.col-md-3.col-6.wow.flipInX.center(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/8.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/8.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  8
                                  figure.grid-item.col-md-3.col-6.wow.bounceInRight(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/9.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/9.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  9
                                  figure.grid-item.col-md-3.col-6.wow.rollIn.center(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/10.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/10.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  10
                                  figure.grid-item.col-md-3.col-6.wow.shake(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.15s', itemscope='')
                                    a(href='assets/images/big-masonry/11.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/11.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  11
                                  figure.grid-item.col-md-3.col-6.wow.swing.center(itemprop='associatedMedia', data-wow-iteration='2', itemscope='')
                                    a(href='assets/images/big-masonry/12.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/12.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  12
                                  figure.grid-item.col-md-3.col-6.wow.rollIn(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/14.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/14.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  13
                                  figure.grid-item.col-md-3.col-6.wow.bounceInUp.center(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='')
                                    a(href='assets/images/big-masonry/15.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/15.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  14
                                  figure.grid-item.col-md-3.col-6.wow.lightSpeedIn(itemprop='associatedMedia', data-wow-delay='0.5s', data-wow-duration='0.15s', itemscope='')
                                    a(href='assets/images/big-masonry/13.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/13.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  15
                                  figure.grid-item.col-md-3.col-6.wow.rollIn.center(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/4.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/4.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  16
                                  figure.grid-item.col-md-3.col-6.wow.pulse(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.25s', itemscope='')
                                    a(href='assets/images/big-masonry/5.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/5.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  17
                                  figure.grid-item.col-md-3.col-6.wow.flip(itemprop='associatedMedia', data-wow-iteration='2', data-wow-duration='0.15s', itemscope='')
                                    a(href='assets/images/big-masonry/9.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/9.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  18
                                  figure.grid-item.col-md-3.col-6.wow.lightSpeedIn.center(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/6.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/6.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  19
                                  figure.grid-item.col-md-3.col-6.wow.bounce(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.15s', itemscope='')
                                    a(href='assets/images/big-masonry/7.jpg', itemprop='contentUrl', data-size='11600x950')
                                      img.img-thumbnail(src='assets/images/masonry/7.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  20
                                  figure.grid-item.col-md-3.col-6.wow.bounceInUp.center(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/8.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/8.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  21
                                  figure.grid-item.col-md-3.col-6.wow.bounceInRight(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/9.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/9.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  22
                                  figure.grid-item.col-md-3.col-6.wow.rollIn.center(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/10.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/10.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  23
                                  figure.grid-item.col-md-3.col-6.wow.bounceInRight.center(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/10.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/10.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  24
                                  figure.grid-item.col-md-3.col-6.wow.rollIn(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='')
                                    a(href='assets/images/big-masonry/11.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/11.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  25
                                  figure.grid-item.col-md-3.col-6.wow.bounceInDown.center(itemprop='associatedMedia', data-wow-delay='1s', itemscope='')
                                    a(href='assets/images/big-masonry/12.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/12.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  26
                                  figure.grid-item.col-md-3.col-6.wow.bounceInRight(itemprop='associatedMedia', data-wow-delay='1.5s', itemscope='')
                                    a(href='assets/images/big-masonry/14.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/14.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  27
                                  figure.grid-item.col-md-3.col-6.wow.bounceInRight.center(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/15.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/15.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  28
                                  figure.grid-item.col-md-3.col-6.wow.rollIn(itemprop='associatedMedia', data-wow-delay='0.5s', itemscope='')
                                    a(href='assets/images/big-masonry/13.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/13.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  29
                                  figure.grid-item.col-md-3.col-6.wow.bounceInLeft.center(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/4.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/4.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  30
                                  figure.grid-item.col-md-3.col-6.wow.lightSpeedIn(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/5.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/5.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  31
                                  figure.grid-item.col-md-3.col-6.wow.pulse(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/6.jpg', itemprop='contentUrl', data-size='1600x950')
                                      img.img-thumbnail(src='assets/images/masonry/6.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  32
                                  figure.grid-item.col-md-3.col-6.wow.slideInRight(itemprop='associatedMedia', itemscope='')
                                    a(href='assets/images/big-masonry/7.jpg', itemprop='contentUrl', data-size='11600x950')
                                      img.img-thumbnail(src='assets/images/masonry/7.jpg', itemprop='thumbnail', alt='Image description')
                                    figcaption(itemprop='caption description') Image caption  33

                              // Root element of PhotoSwipe. Must have class pswp.
                              .pswp(tabindex='-1', role='dialog', aria-hidden='true')
                                //
                                  Background of PhotoSwipe.
                                  It's a separate element, as animating opacity is faster than rgba().
                                .pswp__bg
                                // Slides wrapper with overflow:hidden.
                                .pswp__scroll-wrap
                                  // Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory.
                                  // don't modify these 3 pswp__item elements, data is added later on.
                                  .pswp__container
                                    .pswp__item
                                    .pswp__item
                                    .pswp__item
                                  // Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed.
                                  .pswp__ui.pswp__ui--hidden
                                    .pswp__top-bar
                                      // Controls are self-explanatory. Order can be changed.
                                      .pswp__counter
                                      button.pswp__button.pswp__button--close(title='Close (Esc)')
                                      button.pswp__button.pswp__button--share(title='Share')
                                      button.pswp__button.pswp__button--fs(title='Toggle fullscreen')
                                      button.pswp__button.pswp__button--zoom(title='Zoom in/out')
                                      // Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR
                                      // element will get class pswp__preloader--active when preloader is running
                                      .pswp__preloader
                                        .pswp__preloader__icn
                                          .pswp__preloader__cut
                                            .pswp__preloader__donut
                                    .pswp__share-modal.pswp__share-modal--hidden.pswp__single-tap
                                      .pswp__share-tooltip
                                    button.pswp__button.pswp__button--arrow--left(title='Previous (arrow left)')
                                    button.pswp__button.pswp__button--arrow--right(title='Next (arrow right)')
                                    .pswp__caption
                                      .pswp__caption__center
                          .card
                            .card-header.pb-0.wow-title
                              h5
                                span.badge.badge-primary.badge-pill.me-2 1
                                | Setup wow.js
                              span (You can link to another CSS animation library by changing wow.js settings)
                            .card-body
                              div
                                .line
                                  code
                                    span
                                      | <link rel="stylesheet" href="css/animate.css" >
                          .card
                            .card-header.pb-0.wow-title
                              h5
                                span.badge.badge-primary.badge-pill.me-2 2
                                | Link and activate wow.js
                            .card-body
                              div
                                .line
                                  | &lt; script src="js/wow.min.js" &gt; &lt; /script &gt; <br />&lt; script &gt; <br /><code>  WOW.init();</code><br />&lt; /script &gt;
                          .card
                            .card-header.pb-0.wow-title
                              h5
                                span.badge.badge-primary.badge-pill.me-2 3
                                | Make an element revealable
                              span (You can change this CSS class in the WOW settings to avoid name conflicts.)
                            .card-body
                              h6.text-muted
                                | Add the CSS class .wow to a HTML element: it will be invisible until the user scrolls to reveal it.
                              div
                                .line
                                  | &lt; div class="wow" &gt; <br /><code>Content to Reveal Here</code><br />&lt; /div &gt;
                          .card
                            .card-header.pb-0.wow-title
                              h5
                                span.badge.badge-primary.badge-pill.me-2 4
                                | Choose the animation style
                              span
                                | Pick an animation style in Animate.css , then add the CSS class to the HTML element
                            .card-body
                              div
                                .line
                                  | &lt; div class="wow bounceInUp" &gt; <br /><code>Content to Reveal Here</code><br />&lt; /div &gt;
                          .card
                            .card-header.pb-0.wow-title
                              h5
                                span.badge.badge-success.badge-pill.me-2 Extra
                                | Advance Options
                            .card-body
                              div
                                .line
                                  p
                                    strong data-wow-duration: 
                                    | Change the animation duration
                                    br
                                    strong data-wow-delay: 
                                    | Delay before the animation starts
                                    br
                                    strong data-wow-offset: 
                                    | Distance to start the animation (related to the browser bottom)
                                    br
                                    strong data-wow-iteration: 
                                    | Number of times the animation is repeated
                                    br
                                  pre.mb-0
                                      | &lt;section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"&gt;<br /> &lt;/section&gt;<br /> &lt;section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"&gt;<br /> &lt;/section&gt;
                                                        
                          .card
                            .card-header.pb-0.wow-title
                              h5
                                span.badge.badge-danger.badge-pill.me-2 Settings
                                | Customize Settings
                            .card-body
                              div
                                .line
                                  p
                                    strong boxClass: 
                                    | Class name that reveals the hidden box when user scrolls.
                                  p
                                    strong animateClass: 
                                    | Class name that triggers the CSS animations (’animated’ by default for the animate.css library)
                                  p
                                    strong offset: 
                                    | Define the distance between the bottom of browser viewport and the top of hidden box.
                                    br
                                    | When the user scrolls and reach this distance the hidden box is revealed.
                                  p
                                    strong mobile: 
                                    | Turn on/off wow.js on mobile devices.
                                  p
                                    strong live: 
                                    | consatantly check for new WOW elements on the page.
                                  pre.mb-0
                                    | wow = new WOW(<br /> {<br /> boxClass: 'wow', // default<br /> animateClass: 'animated', // default<br /> offset: 0, // default<br /> mobile: true, // default<br /> live: true // default<br /> }<br /> )<br /> wow.init();                    
                                  // Page Body Ends                   
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files