- var theme_customizer      = true;
- var photo_swipe           = true;
- var isotope               = true;
- var aos                   = true;
- var page_aos              = 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-fluid
            .page-title
              .row
                .col-6
                  h3
                    | AOS Animation
                .col-6
                  ol.breadcrumb
                    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 AOS Animation
          // Container-fluid starts
          .container-fluid
            .row
              .col-sm-12
                .card
                  .card-header
                    h5 AOS Example animation
                  .card-body
                    #aniimated-thumbnials.row.gallery.grid.my-gallery
                      figure.grid-item.col-sm-3(data-aos='fade-down')
                        a(href='../assets/images/big-masonry/1.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/1.jpg', alt='Image description')
                        figcaption Image caption  1
                      figure.grid-item.col-sm-3(data-aos='zoom-out-down')
                        a(href='../assets/images/big-masonry/2.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/2.jpg', alt='Image description')
                        figcaption Image caption  2
                      figure.grid-item.col-sm-3(data-aos='flip-down')
                        a(href='../assets/images/big-masonry/3.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/3.jpg', alt='Image description')
                        figcaption Image caption  3
                      figure.grid-item.col-sm-3(data-aos='fade-up')
                        a(href='../assets/images/big-masonry/4.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/4.jpg', alt='Image description')
                        figcaption Image caption  4
                      figure.grid-item.col-sm-3(data-aos='flip-down')
                        a(href='../assets/images/big-masonry/5.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/5.jpg', alt='Image description')
                        figcaption Image caption  5
                      figure.grid-item.col-sm-3(data-aos='fade-up')
                        a(href='../assets/images/big-masonry/6.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/6.jpg', alt='Image description')
                        figcaption Image caption  6
                      figure.grid-item.col-sm-3(data-aos='flip-down')
                        a(href='../assets/images/big-masonry/7.jpg', data-size='11600x950')
                          img.img-thumbnail(src='../assets/images/masonry/7.jpg', alt='Image description')
                        figcaption Image caption  7
                      figure.grid-item.col-sm-3(data-aos='fade-up')
                        a(href='../assets/images/big-masonry/8.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/8.jpg', alt='Image description')
                        figcaption Image caption  8
                      figure.grid-item.col-sm-3(data-aos='flip-down')
                        a(href='../assets/images/big-masonry/9.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/9.jpg', alt='Image description')
                        figcaption Image caption  9
                      figure.grid-item.col-sm-3(data-aos='fade-up')
                        a(href='../assets/images/big-masonry/10.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/10.jpg', alt='Image description')
                        figcaption Image caption  10
                      figure.grid-item.col-sm-3(data-aos='flip-down')
                        a(href='../assets/images/big-masonry/11.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/11.jpg', alt='Image description')
                        figcaption Image caption  11
                      figure.grid-item.col-sm-3(data-aos='fade-up')
                        a(href='../assets/images/big-masonry/12.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/12.jpg', alt='Image description')
                        figcaption Image caption  12
                      figure.grid-item.col-sm-3(data-aos='flip-down')
                        a(href='../assets/images/big-masonry/14.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/14.jpg', alt='Image description')
                        figcaption Image caption  13
                      figure.grid-item.col-sm-3(data-aos='flip-left')
                        a(href='../assets/images/big-masonry/15.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/15.jpg', alt='Image description')
                        figcaption Image caption  14
                      figure.grid-item.col-sm-3(data-aos='flip-down')
                        a(href='../assets/images/big-masonry/13.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/13.jpg', alt='Image description')
                        figcaption Image caption  15
                      figure.grid-item.col-sm-3(data-aos='zoom-out')
                        a(href='../assets/images/big-masonry/4.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/4.jpg', alt='Image description')
                        figcaption Image caption  16
                      figure.grid-item.col-sm-3(data-aos='flip-right')
                        a(href='../assets/images/big-masonry/5.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/5.jpg', alt='Image description')
                        figcaption Image caption  17
                      figure.grid-item.col-sm-3(data-aos='zoom-out')
                        a(href='../assets/images/big-masonry/6.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/6.jpg', alt='Image description')
                        figcaption Image caption  18
                      figure.grid-item.col-sm-3(data-aos='zoom-out-up')
                        a(href='../assets/images/big-masonry/7.jpg', data-size='11600x950')
                          img.img-thumbnail(src='../assets/images/masonry/7.jpg', alt='Image description')
                        figcaption Image caption  19
                      figure.grid-item.col-sm-3(data-aos='zoom-out-down')
                        a(href='../assets/images/big-masonry/8.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/8.jpg', alt='Image description')
                        figcaption Image caption  20
                      figure.grid-item.col-sm-3(data-aos='flip-down')
                        a(href='../assets/images/big-masonry/9.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/9.jpg', alt='Image description')
                        figcaption Image caption  21
                      figure.grid-item.col-sm-3(data-aos='slide-up')
                        a(href='../assets/images/big-masonry/10.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/10.jpg', alt='Image description')
                        figcaption Image caption  22
                      figure.grid-item.col-sm-3(data-aos='flip-down')
                        a(href='../assets/images/big-masonry/9.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/9.jpg', alt='Image description')
                        figcaption Image caption  23
                      figure.grid-item.col-sm-3(data-aos='fade-up')
                        a(href='../assets/images/big-masonry/10.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/10.jpg', alt='Image description')
                        figcaption Image caption  24
                      figure.grid-item.col-sm-3(data-aos='flip-down')
                        a(href='../assets/images/big-masonry/11.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/11.jpg', alt='Image description')
                        figcaption Image caption  25
                      figure.grid-item.col-sm-3(data-aos='fade-up')
                        a(href='../assets/images/big-masonry/12.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/12.jpg', alt='Image description')
                        figcaption Image caption  26
                      figure.grid-item.col-sm-3(data-aos='flip-down')
                        a(href='../assets/images/big-masonry/14.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/14.jpg', alt='Image description')
                        figcaption Image caption  27
                      figure.grid-item.col-sm-3(data-aos='flip-left')
                        a(href='../assets/images/big-masonry/15.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/15.jpg', alt='Image description')
                        figcaption Image caption  28
                      figure.grid-item.col-sm-3(data-aos='flip-down')
                        a(href='../assets/images/big-masonry/13.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/13.jpg', alt='Image description')
                        figcaption Image caption  29
                      figure.grid-item.col-sm-3(data-aos='zoom-out')
                        a(href='../assets/images/big-masonry/4.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/4.jpg', alt='Image description')
                        figcaption Image caption  30
                      figure.grid-item.col-sm-3(data-aos='flip-right')
                        a(href='../assets/images/big-masonry/5.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/5.jpg', alt='Image description')
                        figcaption Image caption  31
                      figure.grid-item.col-sm-3(data-aos='zoom-out')
                        a(href='../assets/images/big-masonry/6.jpg', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/6.jpg', alt='Image description')
                        figcaption Image caption  32
                      figure.grid-item.col-sm-3(data-aos='zoom-out-up')
                        a(href='../assets/images/big-masonry/7.jpg', data-size='11600x950')
                          img.img-thumbnail(src='../assets/images/masonry/7.jpg', alt='Image description')
                        figcaption 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
                    h5 Init AOS
                  .card-body
                    div
                      span.comment
                        | // The Below Function is example of how to initlize reveal
                      .line
                        span
                        |  &lt;script&gt; 
                        span
                        br
                        code   AOS.init();
                        br
                        span  &lt;
                        |  /script 
                        span  &gt; 
                .card
                  .card-header
                    h5 How to use it?
                    span
                      | All you have to do is to add 
                      code data-aos
                      |  attribute to html element, like so:
                  .card-body
                    .txt-primary
                      span  &lt;
                      |  div data-aos="animation_name" 
                      span  &gt;  
                .card
                  .card-header
                    h5  Advanced settings
                    span
                      | These settings can be set both on certain elements, or as default while initializing script (in options object without 
                      code  data- part).
                  .card-body.table-responsive
                    table.table.table-bordered.table-striped
                      thead
                        tr
                          th Attribute
                          th Description
                          th Example value
                          th Default value
                      tbody
                        tr
                          td
                            em
                              code data-aos-offset
                          td Change offset to trigger animations sooner or later (px)
                          td 200
                          td 120
                        tr
                          td
                            em
                              code data-aos-duration
                          td *Duration of animation (ms)
                          td 600
                          td 400
                        tr
                          td
                            em
                              code data-aos-easing
                          td Choose timing function to ease elements in different ways
                          td ease-in-sine
                          td ease
                        tr
                          td
                            em
                              code data-aos-delay
                          td Delay animation (ms)
                          td 300
                          td 0
                        tr
                          td
                            em
                              code data-aos-anchor
                          td
                            | Anchor element, whose offset will be counted to trigger animation instead of actual elements offset
                          td #selector
                          td null
                        tr
                          td
                            em
                              code data-aos-anchor-placement
                          td
                            | Anchor placement - which one position of element on the screen should trigger animation
                          td top-center
                          td top-bottom
                        tr
                          td
                            em
                              code data-aos-once
                          td
                            | Choose wheter animation should fire once, or every time you scroll up/down to element
                          td true
                          td false
                .card
                  .card-header
                    h5  Animation
                    span There are serveral predefined animations you can use already:
                  .card-body
                    ul.line
                      li
                        h5 Fade animations:
                        ul.ps-4.mb-4.list-circle
                          li fade
                          li fade-up
                          li fade-down
                          li fade-left
                          li fade-right
                          li fade-up-right
                          li fade-up-left
                          li fade-down-right
                          li fade-down-left
                      li
                        h5 Flip animations:
                        ul.ps-4.mb-4.list-circle
                          li flip-up
                          li flip-down
                          li flip-left
                          li flip-right
                      li
                        h5 Slide animations:
                        ul.ps-4.mb-4.list-circle
                          li slide-up
                          li slide-down
                          li slide-left
                          li slide-right
                      li
                        h5 Zoom animations:
                        ul.ps-4.list-circle
                          li zoom-in
                          li zoom-in-up
                          li zoom-in-down
                          li zoom-in-left
                          li zoom-in-right
                          li zoom-out
                          li zoom-out-up
                          li zoom-out-down
                          li zoom-out-left
                          li zoom-out-right
                .card
                  .card-header
                    h5  Anchor placement:
                  .card-body
                    ul.ps-4.list-circle.line
                      li top-bottom
                      li top-center
                      li top-top
                      li center-bottom
                      li center-center
                      li center-top
                      li bottom-bottom
                      li bottom-center
                      li bottom-top
                .card
                  .card-header
                    h5  Easing functions:
                  .card-body
                    ul.ps-4.list-circle.line
                      li linear
                      li ease
                      li ease-in
                      li ease-out
                      li ease-in-out
                      li ease-in-back
                      li ease-out-back
                      li ease-in-out-back
                      li ease-in-sine
                      li ease-out-sine
                      li ease-in-out-sine
                      li ease-in-quad
                      li ease-out-quad
                      li ease-in-out-quad
                      li ease-in-cubic
                      li ease-out-cubic
                      li ease-in-out-cubic
                      li ease-in-quart
                      li ease-out-quart
                      li ease-in-out-quart
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files      
