Help needed using Split-Text with react

[traile 5 Likes (Newbie)]

Hi Greensock, I'd love to get an example of how to use split-text with react. I'm having some trouble figuring it out. Particularly using Scrolltrigger as well. Thanks in advance.

[GreenSock 18,884 Likes (Superhero)]

Sure, @traile - here's a simple demo: 

See the Pen MWGPJPO?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

 

There's an article showing how to use GSAP in React here: 

 

Thanks for being a Club GreenSock member 🥳

[traile 5 Likes (Newbie)]

10 minutes ago, GreenSock said:

Sure, @traile - here's a simple demo: 

 

 

 

Does that help? 

 

There's an article showing how to use GSAP in React here: 

 

Thanks for being a Club GreenSock member 🥳

Thanks a lot, this was very helpful.

[GreenSock 18,884 Likes (Superhero)]

No problem. Happy to help. Enjoy!

[traile 5 Likes (Newbie)]

Hello again, have a few small issues; When I use a 'to' tween with split-text and scroll-trigger, the animation doesn't work, but when I use the 'from' tween it seems to work OK. Am I doing something wrong or is this just the behavior of gsap? 

 

Also, the splitText.revert() doesn't seem to work when put in the contexts' return function. When I check the DOM, all the elements are still split. Am I just misunderstanding something here?

 

That's all for now I'm sure I'll have more questions soon lol.

[Rodrigo 5,903 Likes (Superhero)]

Hi @traile

 

Can you provide a simple minimal demo that shows exactly the issue you're having? It's quite hard to pinpoint what problem you could be having with just the information you provided.

 

Happy Tweening!

[GreenSock 18,884 Likes (Superhero)]

Yep, seems to work just fine with .to() tweens, and the revert() method is fine: 

See the Pen poVxZOw?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Keep in mind that the gsap.context() doesn't call its "cleanup" function unless you call revert() on that context (which in our demo would only happen if React runs its cleanup). 

 

Like @Rodrigo said, a minimal demo is the key to getting a good answer here. Feel free to just hit the "fork" button in the bottom right corner of the CodePen above if you'd like, and then recreate the issue, save, and post it back here. 

[traile 5 Likes (Newbie)]

Thanks again, everyone. I will create a minimal demo and try to replicate the issues there and then share.