2

I've started using wow.js for the first time and I'm having the issue that the animations keep repeating over and over again unless I explicitly specify an iteration count of 1.

I could specify this everywhere, but based on other websites and according to the documentation this should not be necessary..

The website is a custom theme based on Drupal 7 with Bootstrap.

  • Bootstrap version = 3.3.5 (most recent)
  • Wow version = 1.1.2 (most recent)
  • Animate CSS version = most recent

WOW.js is initiated like this:

jQuery(function ($) {
    new WOW().init({
       iteration: 1
    });
}, jQuery);
Maarten Ureel
  • 393
  • 4
  • 18
  • The source of [wowjs](https://github.com/matthieua/WOW/blob/master/src/wow.coffee#L118) does not appear to use arguments passed to `init()`. That's weird. Either way it appears to simply be a wrap around [this](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count) css rule, which defaults to 1 in Mozilla Failfox. Are you sure there's nothing else affecting your animation? What browser are you using to test this? – Dan Jul 12 '15 at 17:29
  • I'm using Chrome - however I have the same issue in Firefox. I suspect there is indeed something else but I have no idea what. See http://www.verhuur-bestelwagens.be/ – Maarten Ureel Jul 12 '15 at 17:42

1 Answers1

0

Given the link you've provided to your website in your comments - you have a css rule called .animated. The source of it is described here.

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-amation-iteration-count: infinite
}

Your CSS rule is setting the iteration-count to infinite. Woops! Remove that rule. Invoking init() fixes the problem because wowjs' init sets an iteration count on the element which overrides the css rule as inline styles have higher specificity than the class rule. The arguments you pass to init themselves are ignored.

Dan
  • 10,282
  • 2
  • 37
  • 64
  • Yes, thanks man! I am using glyphicons, and there the infinite property is being set. Removing that fixed the issue. Thanks! – Maarten Ureel Jul 12 '15 at 17:51