Different options for specific viewport sizes about sal HOT 4 CLOSED

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.

from sal.

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);

from sal.

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

from sal.

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);`

from sal.