Wow Js

Reveal Animations When You Scroll. Very Animate.css Friend :-) Easily customize animation.

How to install?

Add script right before closing </body> tag, and initialize Wow js.

                
                  <script src="src/plugins/wow/wow.min.js"></script>
                
              

Add wow and animate classes in your element

              
                <div class="flex flex-wrap lsdfdfsdafd -mx-4">
                  <div class="lex-shrink max-w-full pyaieolaksj w-full md:w-1/2 lg:w-1/3 lg:qeyrusldkld">
                    <div class="py-24 border border-primary-700 w-100 mb-6 bg-gray-100 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s"></div>
                  </div>
                  <div class="lex-shrink max-w-full pyaieolaksj w-full md:w-1/2 lg:w-1/3 lg:qeyrusldkld">
                    <div class="py-24 border border-primary-700 w-100 mb-6 bg-gray-100 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s"></div>
                  </div>
                  <div class="lex-shrink max-w-full pyaieolaksj w-full md:w-1/2 lg:w-1/3 lg:qeyrusldkld">
                    <div class="py-24 border border-primary-700 w-100 mb-6 bg-gray-100 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s"></div>
                  </div>
                  <div class="lex-shrink max-w-full pyaieolaksj w-full md:w-1/2 lg:w-1/3 lg:qeyrusldkld">
                    <div class="py-24 border border-primary-700 w-100 mb-6 bg-gray-100 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".1s"></div>
                  </div>
                  <div class="lex-shrink max-w-full pyaieolaksj w-full md:w-1/2 lg:w-1/3 lg:qeyrusldkld">
                    <div class="py-24 border border-primary-700 w-100 mb-6 bg-gray-100 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".3s"></div>
                  </div>
                  <div class="lex-shrink max-w-full pyaieolaksj w-full md:w-1/2 lg:w-1/3 lg:qeyrusldkld">
                    <div class="py-24 border border-primary-700 w-100 mb-6 bg-gray-100 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s"></div>
                  </div>
                </div>
              
            

Trigger Wow js with add wow fadeInUp classes and data-wow-duration="1s" data-wow-delay=".5s" atribute.

data-wow-duration and data-wow-delay can setting with you want, for example in demo we use delay time in .1s, .3s and .5s.

Animate css

Animate css is required for make animation effect for this js. We not writting all animate css in custom css. We only writting following css in default.

No Animate css Description
1 fadeInUp Animate Fade in Up
2 fadeInDown Animate Fade in Down
3 fadeInLeft Animate Fade in Left
4 fadeInRight Animate Fade in Right
5 flipInX Animate Flip Horizontal

If you need other animate css, please copy code from animate.style and paste in src/css/tailwind.css