Wow Animation

RollIn

To create RollIn animation, you can add wow & animate__rollIn class.

<div class="flex flex-wrap items-center justify-center w-full gap-2"> 
  <div>
      <div class="circle wow animate__rollIn" data-wow-delay="0.1s" data-wow-duration="1.5s""></div>
  </div> 
</div>

ShakeX

To create ShakeX animation, add woo & animate__shakeX class.

<div class="flex flex-wrap items-center justify-center w-full gap-2"> 
  <div> 
      <div class="circle wow animate__shakeX" data-wow-delay="0.1s" data-wow-duration="1.5s""></div>
  </div> 
</div>

HeartBeat

To create HeartBeat animation, add woo & animate__heartBeat class.

<div class="flex flex-wrap items-center justify-center w-full gap-2"> 
  <div> 
      <div class="circle wow animate__heartBeat" data-wow-delay="0.1s" data-wow-duration="1.5s""></div>
  </div> 
</div>

ZoomInLeft

You can set ZoomInLeft animation using woo & animate__zoomInLeft class.

<div class="flex flex-wrap items-center justify-center w-full gap-2"> 
  <div> 
      <div class="circle wow animate__zoomInLeft" data-wow-delay="0.1s" data-wow-duration="1.5s""></div>
  </div> 
</div>

ZoomOutRight

You can set ZoomOutRight animation using woo & animate__zoomOutRight class.

<div class="flex flex-wrap items-center justify-center w-full gap-2"> 
  <div> 
      <div class="circle wow animate__zoomOutRight" data-wow-delay="0.1s" data-wow-duration="1.5s""></div>
  </div> 
</div>

LightSpeedInRight

You can set LightSpeedInRight animation using woo & animate__lightSpeedInRight class.

<div class="flex flex-wrap items-center justify-center w-full gap-2"> 
  <div> 
      <div class="circle wow animate__lightSpeedInRight" data-wow-delay="0.1s" data-wow-duration="1.5s""></div>
  </div> 
</div>

FadeInDownBig

You can set FadeInDownBig animation using woo & animate__fadeInDownBig class.

<div class="flex flex-wrap items-center justify-center w-full gap-2"> 
  <div> 
      <div class="circle wow animate__fadeInDownBig" data-wow-delay="0.1s" data-wow-duration="1.5s""></div>
  </div> 
</div>

FadeInDown

You can set FadeInDown animation using woo & animate__fadeInDown class.

<div class="flex flex-wrap items-center justify-center w-full gap-2"> 
  <div> 
      <div class="circle wow animate__fadeInDown" data-wow-delay="0.1s" data-wow-duration="1.5s""></div>
  </div> 
</div>

FadeOutRightBig

You can set FadeOutRightBig animation using woo & animate__fadeOutRightBig class.

<div class="flex flex-wrap items-center justify-center w-full gap-2"> 
  <div> 
      <div class="circle wow animate__fadeOutRightBig" data-wow-delay="0.1s" data-wow-duration="1.5s""></div>
  </div> 
</div>

BackOutRight

You can set BackOutRight animation using woo & animate__backOutRight class.

<div class="flex flex-wrap items-center justify-center w-full gap-2"> 
  <div> 
      <div class="circle wow animate__backOutRight" data-wow-delay="0.1s" data-wow-duration="1.5s""></div>
  </div> 
</div>

BackInUp

You can set BackInUp animation using woo & animate__backInUp class.

<div class="flex flex-wrap items-center justify-center w-full gap-2"> 
  <div> 
      <div class="circle wow animate__backInUp" data-wow-delay="0.1s" data-wow-duration="1.5s""></div>
  </div> 
</div>

SlideInUp

You can set SlideInUp animation using woo & animate__slideInUp class.

<div class="flex flex-wrap items-center justify-center w-full gap-2"> 
  <div> 
      <div class="circle wow animate__slideInUp" data-wow-delay="0.1s" data-wow-duration="1.5s""></div>
  </div> 
</div>

How to use WOW animation ?

Step 1 : Plugin setup for css

By adding this the animation css will added to your project

  plugins: [
      require('tailwindcss-animatecss')({
          classes: []                             
      }),
  ]

Step 2 : Add JS

  <!-- you just need to true the wow variable in page -->
  -var wow=true;
  <script src="../../assets/js/wow.js"> </script>
  <script src="../../assets/js/wow-custom.js"> </script>

All set😍 Now you can see animations will be revealed when the page scrolls.

Copyright 2023 © Govo theme by pixelstrap

Hand crafted & made with

Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Monochrome Mode