wow.js animation on mobile chrome triggers only on stop scrolling

Question

I´m using wow.js with animate.css for showing some effects on scrolling. On desktop and mobile safari all works nice but not on mobile chrome. I think chrome does render the scrolling different?

When I scroll down, the content blocks should appear with a fade effect. But instead, it appears only if the scrolling has completely stopped. In mobile Safari the effect shows up, when the block is entering the viewport. This is correct.

Is there any workaround for showing the animations on mobile chrome like on mobile safari?

Answer 1

Everything looked the same in Safari and Chrome on iPhone 6, but it looks like you have mobile animations turned off. Try this.

JS:

wow = new WOW(
    {
      boxClass:     'wow',      // default
      animateClass: 'animated', // default
      offset:       0,          // default
      mobile:       true,       
      live:         true        // default
    }
  )
wow.init();

Update: Please see stackoverflow.com/a/27574822/4556503. That answer explains the difference in iOS scroll events. Apple made changes in the way iOS 8 handles scroll events, but Chrome on iOS is still using UIWebview instead of the newer WKWebView to render pages. Your issue will most likely be resolved once Google updates Chrome for iOS to WKWebView.