WOW Animation

ADMIN PANEL

RollIn

You can use this wow animation by adding .wow & .animate__rollIn

PreviewHtml
 <div class="wow animate__rollIn" data-wow-delay="0.1s" data-wow-duration="1.5s"> 
</div>

ShakeX

You can use this wow animation by adding .wow & .animate__shakeX

PreviewHtml
 <div class="wow animate__shakeX" data-wow-delay="0.1s" data-wow-duration="1.5s"> 
</div>

HeartBeat

You can use this wow animation by adding .wow & .animate__heartBeat

PreviewHtml
 <div class="wow animate__heartBeat" data-wow-delay="0.1s" data-wow-duration="1.5s"> 
</div>

BounceIn

You can use this wow animation by adding .wow & .animate__bounceIn

PreviewHtml
 <div class="wow animate__bounceIn" data-wow-delay="0.1s" data-wow-duration="1.5s"> 
</div>

SlideInUp

You can use this wow animation by adding .wow & .animate__slideInUp

PreviewHtml
 <div class="wow animate__slideInUp" data-wow-delay="0.1s" data-wow-duration="1.5s"> 
</div>

FadeInDownBig

You can use this wow animation by adding .wow & .animate__fadeInDownBig

PreviewHtml
 <div class="wow animate__fadeInDownBig" data-wow-delay="0.1s" data-wow-duration="1.5s"> 
</div>

FadeInDown

You can use this wow animation by adding .wow & .animate__fadeInDown

PreviewHtml
 <div class="wow animate__fadeInDown" data-wow-delay="0.1s" data-wow-duration="1.5s"> 
</div>

FadeInRight

You can use this wow animation by adding .wow & .animate__fadeInRight

PreviewHtml
 <div class="wow animate__fadeInRight" data-wow-delay="0.1s" data-wow-duration="1.5s"> 
</div>

FadeOutRightBig

You can use this wow animation by adding .wow & .animate__fadeOutRightBig

PreviewHtml
 <div class="wow animate__fadeOutRightBig" data-wow-delay="0.1s" data-wow-duration="1.5s"> 
</div>

LightSpeedInRight

You can use this wow animation by adding .wow & .animate__lightSpeedInRight

PreviewHtml
 <div class="wow animate__lightSpeedInRight" data-wow-delay="0.1s" data-wow-duration="1.5s"> 
</div>

BackInUp

You can use this wow animation by adding .wow & .animate__backInUp

PreviewHtml
 <div class="wow animate__backInUp" data-wow-delay="0.1s" data-wow-duration="1.5s"> 
</div>

BackOutRight

You can use this wow animation by adding .wow & .animate__backOutRight

PreviewHtml
 <div class="wow animate__backOutRight" data-wow-delay="0.1s" data-wow-duration="1.5s"> 
</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

For PUG UserFor Html User
 <!-- 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.

Animation class list

Here is all animation classes list you can use any from it

  • .animate__bounce
  • .animate__flash
  • .animate__pulse
  • .animate__rubberBand
  • .animate__shakeY
  • .animate__shakeX
  • .animate__headShake
  • .animate__swing
  • .animate__tada
  • .animate__wobble
  • .animate__jello
  • .animate__heartBeat
  • .animate__hinge
  • .animate__jackInTheBox
  • .animate__lightSpeedIn
  • .animate__lightSpeedOut
  • .animate__flip
  • .animate__flipInX
  • .animate__flipInY
  • .animate__flipOutX
  • .animate__flipOutY
  • .animate__rotateIn
  • .animate__rotateInDownLeft
  • .animate__rotateInDownRight
  • .animate__rotateInUpLeft
  • .animate__rotateInUpRight
  • .animate__rotateOut
  • .animate__rotateOutDownLeft
  • .animate__rotateOutDownRight
  • .animate__rotateOutUpLeft
  • .animate__rotateOutUpRight
  • .animate__rollIn
  • .animate__rollOut
  • .animate__zoomIn
  • .animate__zoomInUp
  • .animate__zoomInDown
  • .animate__zoomInLeft
  • .animate__zoomInRight
  • .animate__bounceIn
  • .animate__bounceInDown
  • .animate__bounceInUp
  • .animate__bounceInLeft
  • .animate__bounceInRight
  • .animate__bounceOut
  • .animate__bounceOutDown
  • .animate__bounceOutUp
  • .animate__bounceOutLeft
  • .animate__bounceOutRight
  • .animate__slideInDown
  • .animate__slideInLeft
  • .animate__slideInRight
  • .animate__slideInUp
  • .animate__slideOutDown
  • .animate__slideOutLeft
  • .animate__slideOutRight
  • .animate__slideOutUp
  • .animate__fadeIn
  • .animate__fadeInDown
  • .animate__fadeInDownBig
  • .animate__fadeInLeft
  • .animate__fadeInLeftBig
  • .animate__fadeInRight
  • .animate__fadeInRightBig
  • .animate__fadeInUp
  • .animate__fadeInUpBig
  • .animate__fadeInTopLeft
  • .animate__fadeInTopRight
  • .animate__fadeInBottomLeft
  • .animate__fadeInBottomRight
  • .animate__fadeOut
  • .animate__fadeOutDown
  • .animate__fadeOutDownBig
  • .animate__fadeOutLeft
  • .animate__fadeOutLeftBig
  • .animate__fadeOutRight
  • .animate__fadeOutRightBig
  • .animate__fadeOutUp
  • .animate__fadeOutUpBig
  • .animate__fadeOutTopLeft
  • .animate__fadeOutTopRight
  • .animate__fadeOutBottomLeft
  • .animate__fadeOutBottomRight
  • .animate__zoomOutDown
  • .animate__zoomOutLeft
  • .animate__zoomOutRight
  • .animate__zoomOut
  • .animate__zoomOutUp
  • .animate__lightSpeedInRight
  • .animate__lightSpeedInLeft
  • .animate__lightSpeedOutRight
  • .animate__lightSpeedOutLeft
  • .animate__backInDown
  • .animate__backInUp
  • .animate__backInLeft
  • .animate__backInRight
  • .animate__backOutDown
  • .animate__backOutUp
  • .animate__backOutLeft
  • .animate__backOutRight
Customizer
  • Template Mode
    Choose template mode dark & light
  • Layout Type
    Choose layout Ltr & Rtl
  • Sidebar Type
    Choose Sidebar icon & full
Buy Now