Jump to content


Help needed using Split-Text with react

Moderator Tag
Go to solution Solved by GreenSock,

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

No problem. Happy to help. Enjoy!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

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.