React "Cannot add property _gsap, object is not extensible"

[Yunus Emre 9 Likes (Newbie)]

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:

https://codesandbox.io/s/gsap-react-nextjs-tuli0?file=/src/App.js

 

I may be using the Refs wrong but not sure.

What do I have to change to get it to work?

 

 

 

See the Pen PomEvLR by ynsmrsk (@ynsmrsk) on CodePen

[OSUblake 18,400 Likes (Superhero)]

Hi Yunus!

 

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.

 

https://codesandbox.io/s/gsap-react-nextjs-forked-el7xw?file=/src/Animations.jsx

 

If you want to use a fragment instead of wrapping the children with an element, then you would need to pass in the element references.

 

https://codesandbox.io/s/gsap-react-nextjs-forked-ok5fg?file=/src/Animations.jsx

 

Or you could just put everything inside a custom hook.

 

https://codesandbox.io/s/gsap-react-nextjs-forked-ijcob?file=/src/useTextReveal.js

 

 

[Yunus Emre 9 Likes (Newbie)]

Thanks for all the solutions OSUblake! All of them are great for me. But I must say that I now understand why GSAP doesn't go so well with React. 

Nonetheless it's framerwork/library agnostic and has great support though.

First approach ok for me. Is other solutions has any advantage over this in terms of best practices?

Custom Hook and other approach seems perfect for modularity but has some extra steps. 

I learned a lot about parent/child ref management from them anyway, so thanks again.

[OSUblake 18,400 Likes (Superhero)]

18 minutes ago, Yunus Emre said:

Thanks for all the solutions OSUblake! All of them are great for me. But I must say that I now understand why GSAP doesn't go so well with React. 

 

Well it just not GSAP, it's any imperative code. Even something simple like setInterval requires a bunch of extra steps to get working.

https://overreacted.io/making-setinterval-declarative-with-react-hooks/

 

20 minutes ago, Yunus Emre said:

Is other solutions has any advantage over this in terms of best practices?

 

Not really. I was just trying to show different ways to approach the problem. The first solution is definitely the easiest, but some people might not like how it adds a wrapper element. However, without the wrapper element, you have to add extra steps to get references to the elements.