Aos: Problem with WordPress gallery and images

[juliamenndez]

This is:

• Bug

Specifications

• AOS version: 2.1.1
• OS: macOS
• Browser: Fireforx, Chrome

Expected Behavior

I have a portfolio with a gallery of images which I set to fade in when scrolling.

Actual Behavior

If I only have the gallery, it works fine, but if I add a static image before the gallery (for example, in the text that precedes the gallery), the last image of the gallery doesn't animate properly and it's not being shown. I checked with the inspector and for the last image the class _aos-animate_ is not being assigned, so I guess that is why is not working.

I also notice that every image takes longer than the previous one to animate.

Steps to Reproduce the Problem

You can see the problem in here: https://juliamenndez.com/trabajos/la-ciudad-perdida/

1. Open the link
2. Scroll down until the end of the page. You will se a big white space for the last gallery image, but it's opacity is set to 0, so it's hidden.

[joshangehr]

This is not an issue with AOS, but with the images being lazyloaded. Because the images are lazyloaded, they take up no space in the DOM until they're rendered. Since AOS is calculating the body height on load, it's not taking into account the width and height of the images and the offset will grow more and more out of sync on page load as images are added. It looks like you're using lazysizes, so one thing I would try is this:

document.addEventListener("lazyloaded", () => {
    AOS.refresh();
});

[juliamenndez]

Hi Josh.
You were completely right, I forgot about lazy loading completely. Your solution worked perfectly.
Thank you for your help!
Regards.