0

I use ScrollMagic to trigger animations on each section of a web page. This works great for desktop and for some browsers on mobile.

However there are some mobile browsers (older versions of Safari and Chrome (on ipad)) that don't play these animations until the scrolling event is finished. I know there are ways around that. However instead, I would like to simply turn off these animations when not supported.

Is there a way to detect that with Modernizr? Or would I have to target specific browsers and its versions?

Jan Paepke
  • 1,879
  • 13
  • 23

2 Answers2

0

You wouldn't detect parallax animation. That isn't a browser feature, that is something that you can use browser features to accomplish.

In this case you would you be looking to detect if you are reflow the page during a scroll, or if it waits until after the scroll event fires. There is currently no detect for this, and creating one would get pretty greasy.

I believe what you are seeing is the result of the scroll event not firing as you scroll on certain browsers. I cannot think of a way to simulate this with javascript (triggering a scroll event will obviously only trigger one scroll event, so there isn't anything to gain there). As a result, I am not confident that you would ever be able to accurately detect this.

Patrick
  • 13,085
  • 5
  • 30
  • 49
0

I completely agree with Patrick's answer, but would like to add that it is indeed possible to have immediate scroll events on the mobile versions of chrome and safari, you are talking about.

The issue you're describing is related to all iOS devices before version 8.
Before then the mobile browser engine did not trigger "true" scroll events while scrolling, but only once scrolling had come to a full halt (so after the inertia stopped). Even the execution of javascript was suspended, so you couldn't just run a loop to check the scroll position.

Long story short: There are ways around it using containers for scrolling and requestAnimationFrame.
The easiest way I found to get scroll events for pre iOS8 devices is iScroll.

I would recommend to check out this: http://janpaepke.github.io/ScrollMagic/examples/advanced/mobile_basic.html
and this:
http://janpaepke.github.io/ScrollMagic/examples/expert/mobile_advanced.html

So getting back to your original question: How to detect when you would even need those workarounds.
You'd need to check if the you're on iOS version 7 or lower, which, to my knowledge, can't be done with modernizr, as it is a feature detection library.

So check out this thread to learn more: Detect iOS version less than 5 with JavaScript

Community
  • 1
  • 1
Jan Paepke
  • 1,879
  • 13
  • 23