Different options for specific viewport sizes

[quantumleap33]

There is an example in the documentation regarding different options for specific viewport sizes.

const scrollAnimations = sal();

// Provide new options
scrollAnimations.reset({
  selector: 'animated-element',
  once: true,
});

I am not sure I understand the logic. I want to disable animations on mobile. Is there any way to do it?

[mciastek]

Yes, you can use reset() method. Of course, you should remember about adding a debounce to "resize" event handler. For example:

const animation = sal();

const switchAnimations = () => {
  if (window.innerWidth < 768) {
    animation.reset({
      selector: 'animated-element',
      once: true,
    });
  } else {
    animation.reset({
      // some other options
    });
  }
};

switchAnimations();
window.addEventListener('resize', switchAnimations);

Remember that changing options on the fly can cause some flickering, as elements will receive new styles and animation will be repeated.

[quantumleap33]

Hi, thanks for getting back, Mirek.

Ok, so this one works from your example (I am using default selector [data-sal])

const animation = sal();

const switchAnimations = () => {
  if (window.innerWidth < 768) {
    animation.reset({
      once: true,
    });
  } else {
    animation.reset({
      once: false,
    });
  }
};

switchAnimations();
window.addEventListener('resize', switchAnimations);

When I modify your code to disable animations for mobile, it doesn't work. I still get the animations when I resize the browser and refresh.

const animation = sal();

const switchAnimations = () => {
  if (window.innerWidth < 768) {
    animation.reset({
      disable: true,
    });
  } else {
    animation.reset({
      disable: false,
    });
  }
};

switchAnimations();
window.addEventListener('resize', switchAnimations);

[mciastek]

@quantumleap33 try disabled instead of disable. There's a typo docs, the d is missing 🤦 . Let me update the docs.

[quantumleap33]

It doesn't work even with the correction. Only this code works for me:

`const animation = sal();

const switchAnimations = () => {
if (window.innerWidth < 768) {
animation.reset();
animation.disable();
} else {
animation.reset();
animation.enable();
}
};

switchAnimations();
window.addEventListener('resize', switchAnimations);`