- var page_Title = 'AOS Animation';
- var masonry_js            = true;
- var theme_customizer      = 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
                    | AOS 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 AOS Animation
          // Container-fluid starts
          .container
            .grid.grid-cols-12.card-gap
              div(class="col-span-12")
                .card
                  .card-header
                    h5 AOS Example animation
                  .card-body.product-wrapper-grid
                    .grid.grid-cols-12.gap-3.masonryComponent
                      figure(class="col-span-3 sm:col-span-12 masonryItem" data-aos='fade-down')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/1.jpg', alt='Image description')
                      figure(class="col-span-3 sm:col-span-12 masonryItem" data-aos='zoom-out-down')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/2.jpg', alt='Image description')
                      figure(class="col-span-3 sm:col-span-12 masonryItem" data-aos='flip-down')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/3.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='fade-up')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/4.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='flip-down')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/5.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='fade-up')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/6.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='flip-down')
                        a(href='#', data-size='11600x950')
                          img.img-thumbnail(src='../assets/images/masonry/7.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='fade-up')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/8.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='flip-down')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/9.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='fade-up')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/10.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='flip-down')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/11.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='fade-up')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/12.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='flip-down')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/14.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='flip-left')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/15.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='flip-down')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/13.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='zoom-out')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/4.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='flip-right')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/5.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='zoom-out')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/6.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='zoom-out-up')
                        a(href='#', data-size='11600x950')
                          img.img-thumbnail(src='../assets/images/masonry/7.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='zoom-out-down')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/8.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='flip-down')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/9.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='slide-up')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/10.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='flip-down')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/9.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='fade-up')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/10.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='flip-down')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/11.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='fade-up')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/12.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='flip-down')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/14.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='flip-left')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/15.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='flip-down')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/13.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='zoom-out')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/4.jpg', alt='Image description')
                      figure.masonryItem(class="col-span-3 sm:col-span-12" data-aos='flip-right')
                        a(href='#', data-size='1600x950')
                          img.img-thumbnail(src='../assets/images/masonry/5.jpg', 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
                    h5 Init AOS
                  .card-body
                    div
                      i.text-muted 
                        | // 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?
                    p.f-m-light.mt-1
                      | 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
                    p.f-m-light.mt-1
                      | These settings can be set both on certain elements, or as default while initializing script (in options object without 
                      code  data- part).
                  .card-body.overflow-x-auto 
                    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
                    p.f-m-light.mt-1 There are several predefined animations you can use already:
                  .card-body
                    ul.line
                      li
                        h6 Fade animations:
                        ol.ps-4.mb-4
                          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
                        h6 Flip animations:
                        ol.ps-4.mb-4
                          li flip-up
                          li flip-down
                          li flip-left
                          li flip-right
                      li
                        h6 Slide animations:
                        ol.ps-4.mb-4
                          li slide-up
                          li slide-down
                          li slide-left
                          li slide-right
                      li
                        h6 Zoom animations:
                        ol.ps-4
                          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
                    ol.ps-4.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
                    ol.ps-4.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      
