- var page_Title = 'Scroll Reveal';
- var theme_customizer      = true;
- var photo_swipe           = true;
- var scrollreveal          = true;
- var pages_scrollreveal    = 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
                    | Scroll Reveal

                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 Scroll Reveal
          // Container-fluid starts
          .container.scroll-reval-page
            .grid.grid-col-span-12.card-gap
              div(class="col-span-12")
                .card
                  .card-header 
                    h5 Scroll Reveal Example
                  .card-body
                    .gallery.my-gallery
                      #aniimated-thumbnials.grid.grid-cols-12.card-gap(itemscope='')
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/01.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/01.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  1
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/02.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/02.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  2
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/03.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/03.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  3
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/04.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/04.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  4
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/05.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/05.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  5
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/06.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/06.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  6
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/07.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/07.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  7
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/08.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/08.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  8
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/09.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/09.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  9
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/010.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/010.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  10
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/011.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/011.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  11
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/012.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/012.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  12
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/013.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/013.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  13
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/014.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/014.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  14
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/015.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/015.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  15
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/016.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/016.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  16
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/01.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/01.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  17
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/02.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/02.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  18
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/03.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/03.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  19
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/04.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/04.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  20
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/05.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/05.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  21
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/010.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/010.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  22
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/011.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/011.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  23
                        figure.reveal(itemprop='associatedMedia', itemscope='' class="col-span-3 xl:col-span-6 sm:col-span-12")
                          a(href='../assets/images/big-lightgallery/012.jpg', itemprop='contentUrl', data-size='1600x950')
                            img.img-thumbnail(src='../assets/images/lightgallery/012.jpg', itemprop='thumbnail', alt='Image description')
                          figcaption(itemprop='caption description') Image caption  24
                    // 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__bgc 
                      // 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
              div(class="col-span-12")
                .card
                  .card-header
                    h5 How to Use Scroll Reveal(Customize options according to requirements)
                    p.f-m-light.mt-1
                      | Add 
                      code .reveal
                      |  class to any tag for Archive animation like this
                  .card-body
                    div
                      i.text-muted
                        | // The Below Function is example of how to initlize reveal
                      .line
                        span.text-danger if (Modernizr.csstransforms3d)
                        span.text-success {
                        br
                        |                                         window.sr = ScrollReveal();
                        br
                        |                                         sr.reveal('.reveal', {
                        br
                        |                                         duration: 800,
                        br
                        |                                         delay: 400,
                        br
                        |                                         reset: true,
                        br
                        |                                         easing: 'linear',
                        br
                        |                                         scale: 1
                        br
                        |                                         });
                        br
                        span.text-success  }
              div(class="col-span-12")  
                .card
                  .card-header
                    h5 Scroll Reveal Settings options
                  .card-body
                    .p-b-15
                      i.text-muted
                        | // 'bottom', 'left', 'top', 'right'
                      .line
                        | origin: 
                        span.text-danger 'bottom',
                    .p-b-15
                      i.text-muted
                        | // Can be any valid CSS distance, e.g. '5rem', '10%', '20vw', etc.
                      .line
                        | distance: 
                        span.text-danger '20px',
                    .p-b-15
                      i.text-muted
                        | // Time in milliseconds.
                      .line
                        | duration: 
                        span.text-danger 500,
                        |                                         delay: 
                        span.text-danger 0,
                    .p-b-15
                      i.text-muted
                        | // Starting angles in degrees, will transition from these values to 0 in all axes.
                      .line
                        | rotate: { x: 
                        span.text-danger 0
                        | , y: 
                        span.text-danger 0
                        | , z: 
                        span.text-danger 0
                        |  },
                    .p-b-15
                      i.text-muted
                        | // Starting opacity value, before transitioning to the computed opacity.
                      .line
                        | opacity: 
                        span.text-danger 0
                        | ,
                    .p-b-15
                      i.text-muted
                        | // Starting scale value, will transition from this value to 1
                      .line
                        | scale: 
                        span.text-danger  0.9
                        | ,
                    .p-b-15
                      i.text-muted
                        | // Accepts any valid CSS easing, e.g. 'ease', 'ease-in-out', 'linear', etc.
                      .line
                        | easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)',
                    .p-b-15
                      i.text-muted
                        | //  is the default reveal container. You can pass either:
                        br
                        |                                         // DOM Node, e.g. document.querySelector('.fooContainer')
                        br
                        |                                         // Selector, e.g. '.fooContainer'
                      .line
                        | easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)',
                    .p-b-15
                      i.text-muted
                        | // true/false to control reveal animations on mobile.
                      .line
                        | mobile: true,
                    .p-b-15
                      i.text-muted
                        | // true:  reveals occur every time elements become visible
                        br
                        |                                         // false: reveals occur once as elements become visible
                      .line
                        | reset: false,
                    .p-b-15
                      i.text-muted
                        | // 'always' — delay for all reveal animations
                        br
                        |                                         // 'once'   — delay only the first time reveals occur
                        br
                        |                                         // 'onload' - delay only for animations triggered by first load
                      .line
                        | useDelay: 'always',
                    .p-b-15
                      i.text-muted
                        | // Change when an element is considered in the viewport. The default value
                        br
                        |                                     // of 0.20 means 20% of an element must be visible for its reveal to occur.
                      .line
                        | viewFactor: 0.2,
                    .p-b-15
                      i.text-muted
                        | // Pixel values that alter the container boundaries.
                        br
                        |                                     // e.g. Set `{ top: 48 }`, if you have a 48px tall fixed toolbar.
                        br
                        |                                     // --
                        br
                        |                                     // Visual Aid: https://scrollrevealjs.org/assets/viewoffset.png
                      .line
                        | viewOffset: { top: 0, right: 0, bottom: 0, left: 0 },
                    .p-b-15
                      i.text-muted
                        | // Callbacks that fire for each triggered element reveal, and reset.
                      .line
                        | beforeReveal: 
                        span.text-danger function
                        |  (domEl) {},
                        br
                        |                                         beforeReset: 
                        span.text-danger function
                        |  (domEl) {},
                    div
                      i.text-muted
                        | // Callbacks that fire for each completed element reveal, and reset.
                      .line
                        | afterReveal: 
                        span.text-danger function
                        |  (domEl) {},
                        br
                        |                                         afterReset: 
                        span.text-danger function
                        |  (domEl) {}

          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
