How can I change reveal settings based on screen width?

[jj2020driver]

Hello!

Do you think it is necessary/possible to implement width-dependent configuration?

For example, I have layout grid with 2 columns for wide screens and I set each even list item some delay to make left element in a row appear first and right element in a row appear next. However, my layout changes to 1 column, and there becomes no need to delay even items in my list.

Another words, it would be great to change behaviour
data-sr='enter left, move 24px, scale up 0%, delay 0.3s'
into
data-sr='enter left, move 24px, scale up 0%'
dynamically on page resize.

[jlmakes]

Pseudo-code Example using ScrollReveal 3:

var config;
var small;
var large;
var checkWidth;

small = {
  delay : '0s',
  over  : '0.3s'
};

large = {
  delay : '0.3s',
  over  : '0.5s'
};

checkWidth = requestAnimationFrame(function() {
  // set the correct configuration object
  if ( window.innerWidth < 400 ) {
    config = small;
  } else {
    config = large;
  }
  // now create the reveal set
  if ( sr ) {
    sr.reveal('.selector', config );
  }
});

// instantiate ScrollReveal and perform our first width check
window.sr = ScrollReveal();
checkWidth();

window.addEventListener( 'resize', checkWidth );

This is just a demonstration—for production it would be smart to check the browser and use the correct requestAnimationFrame method name inside the event listener callback.

Hope this helps!

[jj2020driver]

Ok thanks, great improvement!