Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a ScrollReveal().refresh(); method #565

Open
PubliAlex opened this issue Nov 3, 2023 · 0 comments
Open

Add a ScrollReveal().refresh(); method #565

PubliAlex opened this issue Nov 3, 2023 · 0 comments

Comments

@PubliAlex
Copy link

PubliAlex commented Nov 3, 2023

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,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant