Reveal Animations When You Scroll with WOW.js

Reveal Animations When You Scroll with WOW.js


WOW.js is one the best plugin for creating animation in a website. It keep the web element hidden and display them when you scroll down to.with stunning animation. WOW.js works on any website, but it works best on one page type website.

WOW javascript


1. Include JS & CSS

WOW.js depends on animate.css to work

<link rel='stylesheet' href=''>
<script src=''></script>


<div class="row">
	<div data-wow-delay="0.5s" class="wow rollIn">
		<img src="" height="200">
	<div data-wow-delay="1s" class="wow bounceInDown center">
		<img src="" height="200">
	<div data-wow-delay="1.5s" class="wow bounceInRight">
		<img src="" height="200">

3. Call WOW.js

new WOW().init();


WOW.js provide maximum options to handle your animation. you can declare animation duration,delay, offset and iteration using following options.

  • data-wow-duration: Change the animation duration
  • data-wow-delay: Delay before the animation starts
  • data-wow-offset: Distance to start the animation (related to the browser bottom)
  • data-wow-iteration: Number of times the animation is repeated


RERUN the demo below to see the animation when page loaded


See the Pen wow.js demo by Thanh Nguyen (@genievn) on CodePen.