$(function() {
    new WOW().init();
});

No animation.

new WOW().init();

It's ok.

Why?

Bests

Something wrong with WOW.js in Firefox (mac ver. 29). All animation running very fast and no screen detection.

Could be nice, if you are using others libs with data-offset, data-delay, etc...

Bests

Hello,

I don't see any changelog. Could you provide it and/or use GitHub release feature: https://github.com/matthieua/jackInTheBox/releases/new?

Bests

I have a few elements with "background-image:url(blablabla)", but it seems that wow.js removes the background css from these elements.

I now have to add a separate child

I am having a similar issue with WOW and Isotope. First I initialize Isotope with masonry, then after the images are loaded using imagesLoaded as Desandro suggests I trigger "layout" to prevent overlapping (http://isotope.metafizzy.co/appendix.html#imagesloaded).

If WOW is loaded apparently it creates a conflict with the position of the elements, and they overlap.

Example with WOW
Example without WOW (initialized but wow class removed)

Someone reported that animations are not working on IE9.

It seems like the code only takes into account a scrollable window. Could we use this on any scrollable div container? Like focusing only on elements inside <div id="myDiv"></div> and make them animate?

U have got an css bug with the horizontal scroll bar

if u apply overflow hidden to .container ? and set the container width to 100% ?

Just sayin...

JavaScript should not overwrite the CSS if not asked for it. We have to remove to global settings on delay, duration and iteration so the it doesn't overwrite the CSS.

Only when a data-wow-* attribute is present, the CSS should be overwritten

How about creating ability to reverse animations on scrollUp. That would be great i think...

Awesome work with this.

What are your thoughts on adding event emitters? I hacked on my own so that I could easily hook into specific animation callbacks, but it isn't pretty. I wonder if other people would find that helpful.

My animations are triggered instantly on page-load (even if the elements are not visible and need to be scrolled down to see) when I don't have height: 100% applied to the html tag.

Seems like in WOW.prototype.isVisible it is calculating viewBottom based on this.element.clientHeight and that value changes significantly depending on whether or not I have height: 100% on the html tag (this.element is the html tag).

Any ideas?

Since the plugin is not disabled on mobile devices any more.

I'll reword the readme, this is just a remirder for myself so I don't forget about it.

Not sure if this is a WOW-Angular-specific issue or more general, but if I init the library with mobile:false then my form's submit button does not run my AngularJS form validation and instead just automatically submits the form. If I remove mobile:false, it works fine.

Hey guys,

first of all thanks for the great js-plugin. I used it tremendously on my site and I love the easy of use and customisation options while being light weight.

Just as it still works in Safari, the wow-animations on my page http://new.circlerotterdam.nl/start (the ones when you scroll down, the navbar is animated without wow) worked also in Chrome and IE. But since a few weeks WOW stopped working without me changing anything in the code.

I checked the init(), I checked if it works with pure animate.css. I can't seem to find the mistake. Would you please take a look. Looks to me like a Chrome and (!?) IE bug in the newer versions.

Thank you.

is it somehow possible to modify/adjust/extend wow.js to add the .animated class when the element is in the view for horizontal scroll websites?

I want animation to be trig every time when it reaches the position. As of now its showing only for the first time. Can any one help me.

thanks in advance.

When you scroll past a animation and scroll back up past it, it will not do a animation again, when you scroll up past it.

I would like it so every time, you scroll past the animation, it does the animation.

Hi,

Amazing plugin!
However, I`m having hard times trying to make it work with Isotope.js plugin( https://github.com/desandro/isotope ). The initial JackInTheBox version worked perfectly, but it seems that this one is not agreed by Isotope. Any thoughts?

Thanks!

Hi. I am using Query Loader 2 (http://gayadesign.com/scripts/queryLoader2/) to preload images on my site. It shows progres bar and when its finished, it opens the page. My problem is that wow.js animations are played during that progres bar and when my page opens nothing happens. I really dont know much about java, but is there any way of playing my animations after the page is fully loaded, like on this page: http://www.adhamdannaway.com/.

Thanx in advance,
Dragan

Hi, I just wanted to know whether are there any trigger events written for the box animations on window scroll or just the animation of boxes from both side on load?

I don't understand, if this works just like scrollorama or http://vbarthel-fr.github.io/scroll-based-animation/demo

Maybe have look at hammer.js library: https://github.com/EightMedia/hammer.js/wiki/Getting-Started

Apparently it can detect drag start, so maybe they made a cross device version of it.

Also throught of modernizer, that can replace touch gesture by click.

Hi @matthieua,

I dunno if you can make something about this.

I tested One Page Scroll: https://github.com/peachananr/onepage-scroll by @peachananr

And WOW is not triggered. Elements are not recognized in the viewport, apparently. Then, elements are always hidden.

Bests

What about a .reinit() or similar method to let wow.js know there are some new elements to watch?

Sorry, don't know what went wrong there.

Hi.

First, sorry for my bad English...

Now I'm working with website, where I need to combine wow.js with flexslider. In most of cases slider is already being displayed, so I need to animate first slider's caption on load. Now wow.js is doing it randomly. Once it animates on load, once on scroll, after page loaded.

P.S. In both cases scrolltop is 0.

Thanks.

I'm getting an issue with this plugin in wordpress 3.8 using jquery 1.10.2.
I'm getting this message in google developer tools console:
Uncaught TypeError: Cannot set property "jackInTheBox' of undefined.
And of course it isn't working. Thanks for your help, and I appreciate your efforts!.

Is it possible already (or easily) to only use options like data-wow-delay when WOW reveal an element during a scroll event only (not for initial render) ?
For example I'm building an page where depending on the screen size, you can get 3 elements animated by default if you have enough screen size. Currently my 3 elements have different delays to don't make all the things appear in the same time (.2s, .4s & 1s). The thing is, if I have a smaller screen (laptop), we just see the 2 first elements. So when we scroll, the element appears correctly but with a (normal) 1s delay (which is weird in this case).
If I use data-wow-delay it works. It change delay BUT even if the elements are display without a scroll event (initial render with big screen).
Is my question clear ?
I'm not comfortable with coffee but I'll see what I can do to eventually add an option if you are ok.

After testing my web-app on a mobile device, I noticed that a white empty space appeared on the right. I went to my site in a browser, and found out that once I scroll, the scrollbar in x appears.

After some time looking for the problem, I removed Wow.js and it worked how it was supposed to. I went to http://mynameismatthieu.com/WOW/index.html and noticed it happens in the page of this project aswell.

Any ideas how to fix this?

It seems in some cases when initializing the script there is a padding being added to the right of the content, creating a horizontal scroll. Haven't been able to pinpoint what exact cases that cause this but it seems to relate to having elements positioned relative and / or fixed with a 100% width. This happens in Chrome and Safari, but in Firefox it only seems to add extra space that matches the scrollbar width (all browsers tested in OSX). Using WOW.js together with Animate.css.

Is there a way to prevent the flash on initial load as you can see here:

http://wp.contempographicdesign.com/wp_hyperion/?cat=2

I know its caused by the dom not being loaded then it hits the JS and loads the animation, but is there a way around this? Noticed your demo site doesn't have that issue.

Cheers,

Chris

Sometimes you want trigger animation on mouseover.

It could be nice to set another CSS class to know when doing the animation.

Example:

{
    events: {
        viewport: 'jack',
        hover: 'boxHovered'
    }
}

class="boxHovered bounceIn"

Or whatever. Otherwise you need to do something like:

$('element').on('mouseover', function () {
    var $this = $(this);
    var effect = 'bounceIn';

    $this
        .addClass('animated ' + effect)
        .on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
        $this.removeClass('animated ' + effect);
    });
});

It sads to do this while jackIntheBox is loaded.

Bests

How do you install this with bower?

when i use wow....it works great

but a div on another part of the page gets its background taken away....and it only happens when the divs background attachment is set to fixed

We only take care of the scroll event, we should consider supporting when the window gets resized.

Hi guys,

Love the script, I use it all the time.

I am having some trouble figuring out why wow.js is disabling some background images on my site, only in Chrome and Opera. Works perfectly in Firefox and Safari. I've used this script many times before so I am assuming this is a conflict.

If this is something you can spot immediately and help with I would greatly appreciate some advice.

http://howdoyouroll.com/new/franchise/

Is it possible to set data-wow-delay for all wow animations?
Something like this:

var wow = new WOW(
  {
    delay: 0.5s
  }
);
wow.init();

I've introduced a change in 0.1.7 where I store the animationName on the dataset property of the DOM element. We can't do that in Firefox until #921834 is fixed.

This is somewhat related to #67.

http://pump-attendant-vivian-22031.bitballoon.com/

It doesn't seem like "visibility:hidden" is being swapped over to "visible" upon the SVG's entering the viewport when using Firefox. Works just fine in Chrome. I've updated to the newest version with no luck.

Hi, great plugin! Using it at the moment for my project and definitely will continue using it in the future!

I stumbled on a little problem. When and element somewhere down the page is scrolled into view, it appears as it should, no problems so far, but when I refresh the page (the viewport is not reset at the top of the page), the element is in the viewport but it doesn't appear until I scroll a little.

Is there a solution to this problem?

https://github.com/pazguille/scrolling

As it's a MIT license, it's possible to get the part of the code we need. if it's useful.

No idea why this is happening. I think @attilaolah has an idea.

Great library everyone. I am really loving it so far. I did notice one small issue. Currently on mobile the animations are only triggered when the user stops scrolling. Any way to fix this? If not is there a quick solution to disabling all together only on mobile screen sizes? Thanks

Great script.

Is there anyway to disable the animations on mobile devices? I'd rather have no animations for users with a screen width of 800px or below for example.

Thanks a lot

On init() removes the background if the background-attachment is set to fixed. (On divs without .wow class, too). Any ideas?

First: thank you a lot for this great work.
I did exactly what was told in the instruction in the documentation page BUT it is not working in Firefox. even the demo page:http://mynameismatthieu.com/WOW/ is not working. the demo page in downloaded files doesn't work too. it works fine in chrome, opera, and even IE.but not in Firefox 29.0 ! can you tell me what to do to make work fine?

There's no tests at the moment, we should add some high level ones at least.