splittext issue in react/nextjs

[RobbieC]

I'm new to using gsap in react/nextjs but i've been following the docs and reading some other threads, but I can figure out what's going on with SplitText in my project. Basically I think SplitText is firing twice, all instances of SplitText in my example, you will see that they are wrapped twice in div's created by SplitText.

 

I have not used codesandbox before but I just threw together a quick sandbox which you will be able to see the issue i'm talking about.

 

https://codesandbox.io/p/github/robbiecren07/robbiecrenshaw.dev-nextjs/draft/

[GreenSock]

That link won't work for me - it says "update your permissions to access projects". ☹️
 

It sounds to me like you're getting bitten by the React 18 double-call of useEffect() in strict mode. SUPER annoying, I know. It's a React thing. Basically it calls useEffect() twice without re-rendering. So you're probably telling SplitText to split the same elements multiple times. 

 

The solution is to make sure you do proper cleanup, like revert() your SplitText instances in the function you return from the useEffect(). If you still need help, please make sure you provide a minimal demo that can be accessed by anyone publicly and we'd be happy to take a look. 

 

I'd strongly recommend reading this article if you haven't already: 

 

[RobbieC]

@GreenSock Jack, can you try that link again? (first time using codesandbox, I forgot to commit the changes).

 

If you go to /app/page.js - you will see gsap.context(), which I have the ctx.revert() - but im guessing that doesn't apply to the splittext within the scope?

[Rodrigo]

Hi @RobbieC,

 

Thanks for pointing that out!

 

@GreenSock, here is a codepen example that shows the issue Robbie is referring to:

See the Pen cbc948bb12786b84ed1416e9a74f0863 by GreenSock (@GreenSock) on CodePen

 

IDK if th way SplitText works and the fact that it doesn't return an actual GSAP instance could be the issue here and it has to be handled separately or if there is an actual issue regarding this particular subject.

 

Please stand by for updates on the thread and in the mean time extend your cleanup function to revert your SplitText instances individually:

useIsomorphicLayoutEffect(() => {
  const splits = [];
  const ctx = gsap.context(() => {
    const frontSplit = new SplitText(".hero_title_1", {
      type: "chars",
      charsClass: "s_child",
    });
    const devSplit = new SplitText(".hero_title_3", {
      type: "chars",
      charsClass: "s_child",
    });
    const webSplit = new SplitText(".hero_title_2", { type: "chars" });
    const splitAbout = new SplitText(".about_text", {
      type: "lines",
    });
    splits.push(frontSplit, devSplit, webSplit, splitAbout);
  }, gsapRef);

  return () => {
    splits.forEach((split) => split.revert());
    ctx.revert();
  }
}, []);

Happy Tweening!

[RobbieC]

@Rodrigo I'm not sure if the codepen you created shows the issue I was having, but I applied your suggestion above:

Quote

useIsomorphicLayoutEffect(() => {
  const splits = [];
  const ctx = gsap.context(() => {
    const frontSplit = new SplitText(".hero_title_1", {
      type: "chars",
      charsClass: "s_child",
    });
    const devSplit = new SplitText(".hero_title_3", {
      type: "chars",
      charsClass: "s_child",
    });
    const webSplit = new SplitText(".hero_title_2", { type: "chars" });
    const splitAbout = new SplitText(".about_text", {
      type: "lines",
    });
    splits.push(frontSplit, devSplit, webSplit, splitAbout);
  }, gsapRef);

  return () => {
    splits.forEach((split) => split.revert());
    ctx.revert();
  }
}, []);

 

 

And this fixed the issue I was having. I'm able to do:

splitAbout = new SplitText('.about_text', { type: 'lines, chars', linesClass: 's_parent', charsClass: 's_child' })

and it returns correctly, 1 div for the 'lines' and then 1 div for each 'chars'.

 

Thanks!

[GreenSock]

4 hours ago, Rodrigo said:

IDK if the way SplitText works and the fact that it doesn't return an actual GSAP instance could be the issue here and it has to be handled separately or if there is an actual issue regarding this particular subject.

Yeah, the next version of SplitText will automatically integrate with gsap.context() and revert() accordingly, but the current version doesn't, so you just need to call the SplitText's revert() method in your cleanup function. 

[RobbieC]

Oh sweet, thanks for the heads up @GreenSock !!

 

On that note, I've read both of the learning gsap in react docs, but are there any other known issues or tweaks that need to be made with gsap when working in react 18?

 

I'm also using Nextjs 13's new experimental app directory, which I'm guessing could bring up some bugs.

[GreenSock]

4 hours ago, RobbieC said:

are there any other known issues or tweaks that need to be made with gsap when working in react 18?

Not that I'm aware of, no. But I'm not a React guy.

 

Tons of people use GSAP in React. GSAP is just JavaScript, after all, and totally framework agnostic so it can animate literally anything anywhere that JS runs. On the rare occasion someone hits a snag using GSAP in React, it's virtually always something on the React side of things (people not understanding how React works). But yeah, I'm pretty confident that if you just follow the advice in the guide (basically use gsap.context() in a useLayoutEffect() and then call that context's revert() method in the React cleanup function), you'll be golden. Or green. Or...good.