SplitText Innerwrap renders twice in StrictMode

[Deallie_Digital]

Hello All

 

I know useEffect renders twice, but is there anyway to prevent the double render of the inner wrap for the attached codesandbox example:

 

https://codesandbox.io/p/sandbox/split-angled-example-forked-62gdg4?file=%2Fapp%2Fglobals.css%3A31%2C1

 

I tried SplitText's revert function also, but it didnt help.

 

Thanks!

Edited October 18, 2023 by Deallie_Digital

[mvaneijgen]

Hi @Deallie_Digital, 

 

Personally I don't use React, but I did look at your link and you're sharing globals.css, but of course there is no GSAP code in your CSS, can you maybe share the file with the code you are looking at? I've marked the topic, so someone with more React knowledge will be with you shortly. But just as a reminder check out this guide it has a lot of tips how to use GSAP with React. https://greensock.com/react/

[GSAP Helper]

Hi there! I see you're using React -

Proper animation cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE.

In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once.

Here's the structure:

// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start.
useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // all your GSAP animation code here
  });
  return () => ctx.revert(); // <- cleanup!
}, []);

This pattern follows React's best practices, and one of the React team members chimed in here if you'd like more background.

We strongly recommend reading the React information we've put together at https://gsap.com/resources/React/

Happy tweening!

[Deallie_Digital]

I updated the link. I used the gsap.context( ) as usual, but it still causes double renders.

[GreenSock]

Great catch, @Deallie_Digital, and thanks for the minimal demo. That problem is due to the fact that you're splitting the same element multiple times and the reverting is occurring in the order you created those but in the next release of GSAP, I'll make the reverting go in reverse order to work around this. You can preview the next release at https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

And here's a unit test: 

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

 

And it's easy to work around in your demo by using a cleanup function that reverts those in the correct order: 

https://codesandbox.io/p/sandbox/split-angled-example-forked-t4rmpk?file=%2Fcomponents%2FSplitTextWrap.tsx%3A23%2C23

 

Sorry about any confusion there. 

 

Does that clear things up? 

[Deallie_Digital]

I saw the example, but didn''t see the SplitText Revert Function you mentioned. I reverted the Splits in my example and it seems to work:

https://codesandbox.io/p/sandbox/split-angled-example-forked-p28hlh?file=%2Fcomponents%2FSplitTextWrap.tsx%3A41%2C31

 

Thanks as always!

[GreenSock]

Oh weird, it didn't save. Yeah, you got it exactly right in your demo now. ✅