Hello! Me again.
I have this codepen here:
I want to implement it to my React / Next.js project. I wanted to have gsap animation codes be seperate from my page/component codes.
So the codebase could be clean and I would have reusable animation component.
But I have problems with Ref's I think.
Here is the error I get when I try to animate multiple imported children element with a loop, in parent gsap animation component:
Hooks can't be inside other functions, so putting useRef and useEffect inside a forEach won't work. On top of that, the children prop is a React object, so GSAP can't call toArray on it.
Here a couple of different approaches. The first is just fixing what you originally had.
If you want to use a fragment instead of wrapping the children with an element, then