- var theme_customizer      = true;
- var tooltip               = true;
- var photo_swipe           = true;
- var isotope               = true;
- var aos                   = true;
- var page_aos              = 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
                                      | AOS Animation
                                    ol.breadcrumb
                                            li.breadcrumb-item
                                              a(href='index.html')
                                              | Home
                                            li.breadcrumb-item Animation
                                            li.breadcrumb-item.active AOS Animation
                                .col-sm-6
                                  include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                        .row
                          .col-sm-12
                            .card
                              .card-header.pb-0
                                h5 AOS Example animation
                              .card-body
                                #aniimated-thumbnials.row.gallery.grid.my-gallery
                                  figure.grid-item.col-sm-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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-4.col-md-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
                                        .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
                                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.pb-0
                                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.pb-0
                                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.pb-0
                                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.pb-0
                                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.pb-0
                                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      
