Animations are not working when wrapping components using RevealList

[warapitiya]

When I wrap a bunch of components using RevealList It will not trigger the animation for some reason.

Issue reproduced: https://codesandbox.io/p/sandbox/serene-poincare-5r6r89.

If I wrap divs instead of custom components, it works as expected.

Not triggers the animation

<RevealList
      interval={60}
      delay={500}
      className="flex flex-wrap items-center justify-center">

      <Box></Box>
      <Box></Box>
      <Box></Box>
      <Box></Box>
      <Box></Box>
      <Box></Box>
      <Box></Box>

</RevealList>

[ritmillio]

Hi @warapitiya. Thank you for looking into this issue.

I've identified a bug on my end. When attempting to animate the cloned elements using scrollreveal.js inside the useEffect hook of the RevealList component, the animation fails to locate the elements. Even tho you are simple returning a div inside the Box component since it's a function component the reference won't be the div it's null that's why it's not working.

To resolve this issue temporarily, I suggest wrapping each Box component inside a div. This will allow the animation to function as expected until I can provide a permanent fix for this problem.

Thank you again for your help, and I apologize for any inconvenience caused. I'll work on resolving this issue promptly and provide an update as soon as possible.

[ritmillio]

Since there is no way to eliminate the use client declaration at the top I close this issue