I used wow.js on my website, the problem is that every time when I refresh the page, it's animate twice instead of one time.
Here is video demo how it's happening on my system Demo
Here is the page link http://csl.nextgeni.us/loading/index.html
Note: I notice that CSS animation running before document ready and run again after document ready.
Here is snippet code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="http://csl.nextgeni.us/loading/css/bootstrap.min.css" rel="stylesheet">
<link href="http://csl.nextgeni.us/loading/css/camera.css" rel="stylesheet">
<link href="http://csl.nextgeni.us/loading/css/animate.css" rel="stylesheet">
<link href="http://csl.nextgeni.us/loading/css/font-awesome.min.css" rel="stylesheet">
<link href="http://csl.nextgeni.us/loading/css/style.css?v002" rel="stylesheet">
</head>
<body>
<header id="header">
<div class="topbar">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ul class="list-inline text-right no-underline">
<li><span data-wow-duration="0.8s" data-wow-delay="0.4s" class="wow animated bounceInRight"><a href="#"><span class="icon icon-info"></span><span class="hidden-xs">[email protected]</span></a></span></li>
<li><span data-wow-duration="0.8s" data-wow-delay="0.5s" class="wow animated bounceInRight"><a href="#"><span class="icon icon-dm"></span><span class="hidden-xs">Direct Message</span></a></span></li>
<li><span data-wow-duration="0.8s" data-wow-delay="0.6s" class="wow animated bounceInRight"><span class="icon icon-phone"></span><span>0114 290 1400</span></span></li>
</ul>
</div>
</div>
</div><!-- .container -->
</div><!-- topbar -->
<div class="menu-wrap">
<div class="navbar navbar-csl " role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="feature-block wow bounceInLeft animated navbar-brand logo" href="#">Credit Style Limited</a>
</div>
<div class="navbar-collapse collapse" style="height: 1px;">
<ul class="nav navbar-nav navbar-right" id="menu">
<li >
<a data-wow-duration="0.3s" data-wow-delay="1.4s" class="feature-block wow animated fadeInDown" href="index.php">Home</a>
</li>
<li class='active'>
<a data-wow-duration="0.3s" data-wow-delay="1.5s" class="feature-block wow animated fadeInDown" href="our-team.php">Our Team</a>
</li>
<li >
<a data-wow-duration="0.3s" data-wow-delay="1.6s" class="feature-block wow animated fadeInDown" href="pre-legal-collection.php">Services</a>
<ul class="dropdown">
<li><a href="pre-legal-collection.php">Pre Legal Collection</a></li>
<li><a href="legal-collection.php">Legal Collection</a></li>
<li><a href="field.php">Field</a></li>
<li><a href="debt-counselling.php">Debt Counselling</a></li>
</ul>
</li>
<li >
<a data-wow-duration="0.3s" data-wow-delay="1.7s" class="feature-block wow animated fadeInDown disabled">Directions</a>
</li>
<li >
<a data-wow-duration="0.3s" data-wow-delay="1.8s" class="feature-block wow animated fadeInDown" href="contact-us.php">Contact Us</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div><!-- .navbar -->
</div><!-- .menu-wrap -->
</header><!-- #header -->
<div data-wow-delay=".7s" class="wow animated bounceIn page-heading">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="text-center">Our Team</h1>
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .container -->
</div><!-- .page-heading -->
<div class="container">
<div class="row">
<div class="col-sm-6">
<img src="http://202.141.239.75/AESd/O2O2CVAU72yX4WEd3LAUNQkwom/wp-content/uploads/2015/04/nature-images.jpg" data-wow-duration="" data-wow-delay="1s" class="wow animated bounceIn img-responsive csl">
</div><!-- .col -->
<div class="col-sm-6">
<div data-wow-duration="" data-wow-delay=".5s" class="wow animated bounceInRight pssh">We're here to help you</div>
<div data-wow-duration="" data-wow-delay=".6s" class="wow animated bounceInRight">
<p>Our clients are from all walks of life and are in financial difficulty for all sorts of reasons from ill- health or relationship problems to changes in employment or over committing on credit.</p>
<p>We understand that making the decision to ask for help with your financial problems can be difficult. That's why we won't ever judge you or take sides, and why we'll always be there to provide the support that's essential to help you out of problem debt.</p>
<p>Every year we provide much-needed free debt advice to hundreds of thousands of people either over the phone or through our website. We also provide help and support to over 100,000 people who are repaying their debts through one of our free debt management plans.</p>
</div>
</div><!-- .col -->
</div><!-- .row -->
<div data-wow-duration=".6s" data-wow-delay=".3s" class="wow animated fadeInDown cta">
<div class="row">
<div class="col-sm-8">
<span data-wow-duration="" data-wow-delay="0.3s" class="wow animated bounceInLeft fa fa-phone"></span>
<div data-wow-duration="" data-wow-delay=".7s" class="wow animated fadeIn heading">Have a question or need a custom quote?</div>
<div data-wow-duration="" data-wow-delay=".9s" class="wow animated fadeIn sub-heading">Contact us via e-mail Or just give us a call at 0114 290 1400</div>
</div><!-- .col -->
<div class="col-sm-4 text-right">
<a data-wow-duration="" data-wow-delay="0.3s" class="wow animated bounceInRight action" href="#">Contact Us</a>
</div><!-- .col -->
</div><!-- .row -->
</div><!-- .cta -->
</div><!-- .container -->
<script src="http://csl.nextgeni.us/loading/js/jquery-2.1.4.min.js"></script>
<script src="http://csl.nextgeni.us/loading/js/wow.min.js"></script>
<script src="http://csl.nextgeni.us/loading/js/bootstrap.min.js"></script>
<script type="text/javascript">
new WOW().init();
jQuery(document).ready(function(e) {
try{
console.log('ready');
}
catch(e){
console.log(e);
}
});
jQuery(window).load(function() {
try{
console.log('loaded');
}
catch(e){
console.log(e);
}
})
</script>
</body>
</html>