traile Posted October 8, 2022 Posted October 8, 2022 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.
Solution GreenSock Posted October 8, 2022 Solution Posted October 8, 2022 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 ? 2
traile Posted October 8, 2022 Author Posted October 8, 2022 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.
traile Posted October 8, 2022 Author Posted October 8, 2022 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 Posted October 8, 2022 Posted October 8, 2022 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 Posted October 8, 2022 Posted October 8, 2022 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 Posted October 9, 2022 Author Posted October 9, 2022 Thanks again, everyone. I will create a minimal demo and try to replicate the issues there and then share.
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now