How can I use wow.js and animate.css without affecting SEO?

Question

I'm using wow.js and animate.css for my homepage.

I read a topic from MDBootstrap and others discussions in which people say that it is bad for SEO.

So I checked in the brwoser and saw that everything with the wow class is in "visibiliy : hidden".

When I use the hack:

jQuery(document).ready(function () {
    var scrolled = false;
    jQuery(window).on('scroll', function() {
        if (!scrolled) {
            scrolled = true;
            new WOW().init();

        }
    });
});

The visibility proprety disappear until I scroll.. Everything is working, I guess it's better for the google crawls ??

But the problem is that every wow class on the first screen, for example navigation items, site title, are not working because now I have to scroll to make animations work.

How can I make them work again ?? i tried my own jquery animation (fadeIn etc) but it produces some bugs on the page..

Does someone know how what is the logic to make all wow class work?

Answer 1

MDb contains two animation classes. In my case it was ok to use the same scrolling solution as the wow effects below the first screen and set the animated class to the elements at the top of the page. But this will only work if you know the elements on the viewport after loading the page, otherwise I think you can only handle it your self.