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 flex-row -mx-4">
                  <div class="lex-shrink max-w-full px-4 w-full md:w-1/2 lg:w-1/3 lg:px-6">
                    <div class="py-24 border border-blue-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 px-4 w-full md:w-1/2 lg:w-1/3 lg:px-6">
                    <div class="py-24 border border-blue-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 px-4 w-full md:w-1/2 lg:w-1/3 lg:px-6">
                    <div class="py-24 border border-blue-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 px-4 w-full md:w-1/2 lg:w-1/3 lg:px-6">
                    <div class="py-24 border border-blue-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 px-4 w-full md:w-1/2 lg:w-1/3 lg:px-6">
                    <div class="py-24 border border-blue-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 px-4 w-full md:w-1/2 lg:w-1/3 lg:px-6">
                    <div class="py-24 border border-blue-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