- var page_Title = 'Wow Animation';
- var masonry_js            = true;
- var theme_customizer      = true;
- var animate               = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Wow Animation
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Animation
                    li.breadcrumb-item.active Wow Animation
          // Container-fluid starts
          .container.wow-animation-page
            .grid.grid-cols-12.card-gap
              div(class="col-span-12")
                .card
                  .card-header 
                    h5 WOW Example animation
                  .card-body.product-wrapper-grid
                    .grid.grid-cols-12.card-gap.masonryComponent
                      figure.masonryItem.wow.rollIn(itemprop='associatedMedia', data-wow-delay='0.5s', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/1.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.bounceInDown.center(itemprop='associatedMedia', data-wow-delay='0.5s', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/2.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.lightSpeedIn(itemprop='associatedMedia', data-wow-delay='0.5s', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/3.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.rollIn.center(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/4.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.pulse(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.15s', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/5.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.bounceInRight.center(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/6.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.bounceInLeft(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='11600x950')
                          img.img-thumbnail(src='../assets/images/masonry/7.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.flipInX.center(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/8.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.bounceInRight(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/9.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.rollIn.center(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/10.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.shake(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.15s', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/11.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.swing.center(itemprop='associatedMedia', data-wow-iteration='2', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/12.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.rollIn(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/14.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.bounceInUp.center(itemprop='associatedMedia', data-wow-delay='0.5s', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/15.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.lightSpeedIn(itemprop='associatedMedia', data-wow-delay='0.5s', data-wow-duration='0.15s', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/13.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.rollIn.center(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/4.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.pulse(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.25s', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/5.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.flip(itemprop='associatedMedia', data-wow-iteration='2', data-wow-duration='0.15s', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/9.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.lightSpeedIn.center(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/6.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.bounce(itemprop='associatedMedia', data-wow-iteration='5', data-wow-duration='0.15s', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='11600x950')
                          img.img-thumbnail(src='../assets/images/masonry/7.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.bounceInUp.center(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/8.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.bounceInRight(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/9.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.rollIn.center(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/10.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.bounceInRight.center(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/10.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.rollIn(itemprop='associatedMedia', data-wow-delay='0.5s', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/11.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.bounceInDown.center(itemprop='associatedMedia', data-wow-delay='1s', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/12.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.bounceInRight(itemprop='associatedMedia', data-wow-delay='1.5s', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/14.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.bounceInRight.center(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/15.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.rollIn(itemprop='associatedMedia', data-wow-delay='0.5s', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/13.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.bounceInLeft.center(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/4.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.lightSpeedIn(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/5.jpg', itemprop='thumbnail', alt='Image description')
                      figure.masonryItem.wow.pulse(itemprop='associatedMedia', class="col-span-3 col-span-6")
                        a(href='#', itemprop='contentUrl', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/6.jpg', itemprop='thumbnail', alt='Image description')
                    // 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.wow-title
                    h5
                      span.badge.badge-primary.rounded-full.me-2 1
                      | Setup wow.js
                    p.f-m-light.mt-1 (You can link to another CSS animation library by changing wow.js settings)
                  .card-body
                    div
                      .line
                        code
                          span
                            | &lt;link rel="stylesheet" href="css/animate.css" &gt;
                .card
                  .card-header.wow-title
                    h5
                      span.badge.badge-primary.rounded-full.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.wow-title
                    h5
                      span.badge.badge-primary.rounded-full.me-2 3
                      | Make an element revealable
                    p.f-m-light.mt-1 (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.wow-title
                    h5
                      span.badge.badge-primary.rounded-full.me-2 4
                      | Choose the animation style
                    p.f-m-light.mt-1
                      | 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.wow-title
                    h5
                      span.badge.badge-success.rounded-full.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.wow-title
                    h5
                      span.badge.badge-danger.rounded-full.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   
