Jump to content
GreenSock

Yunus Emre

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

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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

 

 

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×