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 browser 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

there are two animation classes in MDBs I think its ok to use the scrolling solution  as Wow effect

To the element at the top of the page set your animated class but this works if you have the idea and knowledge about the element on the view port