Map Fade's items at same time in viewport. about react-awesome-reveal HOT 5 CLOSED

I would refactor your code to

{
  data && data.length && (
    <Fade direction="bottom-left" triggerOnce cascade>
      {data.map((post) => (
        <NewsComponent key={post.id} post={post} />
      ))}
    </Fade>
  );
}

Let me know if it helps!

from react-awesome-reveal.

Hi @ivanjeremic, can you attach the code snippet?

from react-awesome-reveal.

Hi @ivanjeremic, can you attach the code snippet?

Sure here the map par with the code.

{data &&
        data.length &&
        data.map((post, index) => (
          <Fade direction="bottom-left" triggerOnce={true} cascade={true}>
            <Fragment key={post.id}>
              <NewsComponent post={post} />
            </Fragment>
          </Fade>
        ))}

from react-awesome-reveal.

I would refactor your code to

{
  data && data.length && (
    <Fade direction="bottom-left" triggerOnce cascade>
      {data.map((post) => (
        <NewsComponent key={post.id} post={post} />
      ))}
    </Fade>
  );
}

Let me know if it helps!

Thanks this helped to solve the issue. One more question regarding map I have is it possible that every child fade's in from a different direction? left right left right...

from react-awesome-reveal.

Glad it helped!

For the second question, you could wrap the i-th child with a <Fade> component, passing it the direction prop of your choice (it could be simply a circular selection over an array of directions).

from react-awesome-reveal.