-3

I make a simple site with wow.js/animate.css and on pages where i use wow.js the animation is lagging and starts a bit later than i expected. If u check this page, all the contect are visible for about 0,5 second, after that the animation start. This is very annoying, how can i solve this?

I tried to set the content to invisible by default and after the page is fully loaded (document.ready), i change the class to visible and add the "wow" class to the desired contents.

The interesting thing is, that if i use e.g. fadeIn/Out, etc. instead of bounceIn, there is no problem.

What should i change to stop the "lagging" of wow animation on my page?

Béla Tóth
  • 117
  • 2
  • 2
  • 7
  • it is not common practice for users of this site to troubleshoot live websites. Code should be provided *in the question body*, and a [mcve] is highly recommended. – Claies Nov 28 '15 at 02:27

1 Answers1

0

Instead of hacking the existing script(s), you might consider simply adding a loading animation to the document ala...

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset='UTF-8'>

        <title>Simple Loader</title>

        <style>
            /* This only works with JavaScript, 
               if it's not present, don't show loader */
            .no-js #loader { display: none;  }
            .js #loader { display: block; position: absolute; left: 100px; top: 0; }
        </style>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

        <script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>

        <script>
            // Wait for window load
            $(window).load(function() {
                // Animate loader off screen
                $("#loader").animate({
                    top: -200
                }, 1500);
            });
        </script>   
    </head>
    <body>
        <img src="download.png" id="loader">
        <img src="//farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg">
    </body>
</html>`

Source: https://css-tricks.com/snippets/jquery/display-loading-graphic-until-page-fully-loaded/

JDQ
  • 443
  • 7
  • 11