Change SplitText Content With React State

[Brtktl]

Hello Gsap Forum,

 

I would like to ask if it possible to update splitText content with react state? Gsap splits text in the ref, but if that text is rendered dynamically and the state changes. React tries to rerender but manipulated dom confuses its head.  Even if i do a revert() and then trigger the state change it throws "Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."  

 

I've created a codepen to reproduce the problem:

See the Pen eYeEpGp by brtktl (@brtktl) on CodePen

[GreenSock]

Hi @Brtktl. Two questions: 

1. Can you please provide a minimal demo, like on CodeSandbox? Here's a starter: https://codesandbox.io/s/gsap-bonus-plugins-react-starter-je6ln Just the simplest possible thing to show the error. 
2. How did you get SplitText? That's supposed to only be available to Club GreenSock members and I don't see any membership associated with your account. 🤷‍♂️

[Brtktl]

 

3 hours ago, GreenSock said:

Hi @Brtktl. Two questions: 

1. Can you please provide a minimal demo, like on CodeSandbox? Here's a starter: https://codesandbox.io/s/gsap-bonus-plugins-react-starter-je6ln Just the simplest possible thing to show the error. 
2. How did you get SplitText? That's supposed to only be available to Club GreenSock members and I don't see any membership associated with your account. 🤷‍♂️

Hello,

I've added a codepen link. 

I'd like to use splitText with a dynamic content and tried it with react on codepen but i got this error. Later on If i see no problem on codepen,  I would like to get a membership.

 

[OSUblake]

Hi Brtktl,

 

This is tricky situation because React doesn't know about the DOM changes SplitText makes. I think there are only 2 possible options here.

 

1. Remove all the tags and conditionally render a string.

 

{int==1? "Hello Im Captain America" : "Selam Im Iron Man"}

 

2. Manually set the innerHTML.

myRef.current.innerHTML = int === 1 ? `<p>Hello Im Captain <br/> America </p>` : `<p>Selam Im  <br/> Iron Man</p>`;

 

I wish I had a better answer for you, but this is just a limitation of React. 😞

 

[Hache]

I'm  having a similar issue with Nextjs. I'm using SplitText and i18n so if you change the language on the page(it's a toggle), all text translates except the split text even when doing a .reverse() at the end of the timeline. 
 

[GreenSock]

3 hours ago, Hache said:

I'm  having a similar issue with Nextjs. I'm using SplitText and i18n so if you change the language on the page(it's a toggle), all text translates except the split text even when doing a .reverse() at the end of the timeline. 
 

I would imagine that having all the characters split apart in their own <div> elements would prevent proper translation at that point, sure. If you reverse() a timeline, that doesn't eliminate the DOM changes that split things apart. For that, you must call .revert() on the SplitText instance. If you still need help, please provide a minimal demo (like in CodePen). 

 

Thanks for being a Club GreenSock member, @Hache 🙌

[Hache]

4 minutes ago, GreenSock said:

I would imagine that having all the characters split apart in their own <div> elements would prevent proper translation at that point, sure. If you reverse() a timeline, that doesn't eliminate the DOM changes that split things apart. For that, you must call .revert() on the SplitText instance. If you still need help, please provide a minimal demo (like in CodePen). 

 

Thanks for being a Club GreenSock member, @Hache 🙌

Hi, I mispelled, I meant using .revert() at the end of the timeline  with the .add option for timelines and even in the cleanup function of the useLayoutEffect, adding as a dependency the translation object. 
The animation toggles correctly and after the timeline finishes, the html goes back to normal instead of splitting each char into a div. Still, it doesn't update the translation for it.

I can't make a demo right now but will try to do it tomorrow. 

Thanks for your reply!