How to disable animations on smaller screens?

[gr2m]

I hope I could just add this CSS

@media (max-width: 480px) {

  /* disable scroll reveal */
  [data-sr] {
    -webkit-tranform: none !important;
    transform: none !important;
  }
}

but it didn't do the trick (in latest Chrome). Do you have a suggestion?

[getimo]

Same problem here. On mobile the animations are annoying because they're triggered when the scroll has finished which leads to blank screens for a while - on iOS at least.

[jlmakes]

This has come up a few times, and will be definitely be supported in v2.0.0.

Duplicate of #32

[maltheluda]

@julianlloyd Julian, thank you, dude! 🍻

[jlmakes]

@getimo @gr2m @maltheluda This is now baked in!

window.sr = new scrollReveal({ mobile: false })

[thulioph]

I'm using window.sr = new scrollReveal({ mobile: false }) and the animations don't disable on iPad, any idea? @julianlloyd 😟

[jlmakes]

@thulioph I didn’t actually realize this, but…

pulled straight from http://detectmobilebrowsers.com/about (where the regex comes from)

So in order to include tablets as mobile, add |android|ipad|playbook|silk to the first regex on line 517

[thulioph]

Thanks @julianlloyd, but don't resolve my problem.
I'm having a little break on project, when returning i see again ✋

[jlmakes]

I see.

Well, I think I’ll be adding support for tablets in the near future. So perhaps by then, I’ll have prepared a solution for you.

[deepakya]

Is there any way to disable ScrollReveal animations on mobile devices but enable them on Tablets such or devices with viewport width of more than 992px ?

[jlmakes]

@deepakya You can use window.matchMedia (browser support) to check your media queries with JavaScript, and configure ScrollReveal as you like. I haven’t tested this, but I believe something like this should get you pretty close...

Example:

var mq = window.matchMedia( "(min-width: 992px)" );
var sr = new ScrollReveal();
var isMobile = sr.tools.isMobile();

// ScrollReveal should proceed if we’re not mobile,
// or if we’re mobile with a matching minimum width. 
if (!isMobile || (isMobile && mq.matches)) {
  sr.reveal('.foo', { reset: true });
  // etc...
}

The sr.tools are used internally, but aren’t documented. In the above example, I use them to check and store whether or not the current device is mobile.