Issue Items do not appear at the right moment when scrolling down.

[ivanjeremic]

If you take a look at my Site https://dev-institut-fuer-bewegende-kuenste-kohl.vercel.app/ you can see that the Fade works for the news but there is a problem that it does not appear at the right moment when you go down, somehow it feels like the box size or layout size makes the problem to react-awesome-reveal. Also there is the issue that if you manage somehow to fill the last row by going up down with your mouse wheel the last 2 items never appear.

I tried to play around with fraction or delay but nothing helped. Any idea how to make it so a new row of news cards appears as soon as maybe 20pixel of the card could be seen. Any suggestion on what I can do here? Here my code

{data && data.length && (
          <Fade
            direction="up"
            cascade={true}
            triggerOnce={true}
            damping={1}
            duration={200}
            fraction={0.2}
          >
            {topNews.map((post, index) => (
              <NewsComponent key={post.id} post={post} />
            ))}
          </Fade>
        )}
```