Grid scroll-effect-delay question

Hi there,

I have a question regarding the grid combined with the scroll-delay effect.
It’s best to take a look at this site: https://www.soelvahof.com/infos/

As you can see, I have a grid with 10 cells. For every cell I set a delay of additional +200ms to make them fade in nicely one after another.
So the first cell has 0ms, the 2nd cell, 200ms, the 3rd 400ms, the 4th 600ms and so on.

But here come the thing: I open up that page and the first 4 cells are fading in one after another nicely due to the delay of +200ms for even cell. My screen can fit those 4 cells. But when I scroll down it takes a while for the other cells to fade in because they have a higher delay, for example the last one has 1800ms.

Same on mobile: on mobile view, there is only visible one cell on the screen due to the responsive design. But when I scroll down, there is still the +200ms delay for every cell, so the further I scroll down, the more time it take for the cells to show up.

I hope it is clear what I’m trying to explain. Maybe you can provide me a solution or any kind of work around.
Thanks a lot.

Hi Daniel,

Thank you for writing in, unfortunately, there is no other way around it, but you need to reset your delay back to 200ms after the 4th cell. That way it does not take too long before the 5th cell shows up.

Cheers,

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.