Add a ScrollReveal().refresh(); method

[PubliAlex]

Hello,

When you deal with lazyloaded images you will always have issue with scrollreveal that calculate animation trigger before content jump.

There is alreay a solution, it's to call the reveal when the image is loaded, something like that :

const lazyImages = document.querySelectorAll('img[loading="lazy"]');

lazyImages.forEach(function(el) {
  el.addEventListener('load', function(e) {
    ScrollReveal().reveal('.animate');
  });
});

The limit of that solution is that you have to specifically call the animation after image have been loaded in order to work. Instead of that, it would be great to be able to call a ScrollReveal().refresh() that would recalculate all the trigger positions of scrollreveal now that content has jumped.

It would work the same way than ScrollReveal().sync() except that sync() method seems to be useful when you add new elements to the dom, not to recalculate position of existing elements.

Best regards,

[dhanushkumar-amk]

const lazyImages = document.querySelectorAll('img[loading="lazy"]');

lazyImages.forEach(function(el) {
el.addEventListener('load', function(e) {
ScrollReveal().reveal('.animate');
});
});