Text Splitting Issue When Moving Page

[gempong]

Issue Description: When we move a page to a new page, the text content on the page is splitting incorrectly. It appears that the old data is being splitted and displayed on the new page, This issue occurs in NextJS.

useEffect(() => {
    setTimeout(() => {
      SplitType.create("[text-split]", {
        types: "lines",
        splitClass: "line-wrapper",
        tagName: "span",
      });

      SplitType.create(".line", {
        types: "lines",
        splitClass: "line-inner",
        tagName: "span",
      });
    }, 1000);
  });

i added a timeout to ensure that the original text was correct but after running splitType it just became the old text

codesandbox live demo

On the page click next link to move to the next page. Thank you, I hope you can help me with this issue

[lukePeavey]

Thank you for including a code sandbox demo with your issue. I will take a look at this as soon as I have a chance

[lukePeavey]

I see what you mean. I will have to look into this. Will update you when I have some more info.

[gempong]

I see what you mean. I will have to look into this. Will update you when I have some more info.

Thank you, I'll wait for the update

[lukePeavey]

I tried creating a new nextJs app (similar to your example). SplitType is working as expected when navigating between pages. I'm not sure what is causing the issue in your example, but I will take another look at it this weekend when I have more time.

here is a working example using next@latest with App router, in case this helps (it should work with pages router as well).

https://codesandbox.io/p/sandbox/next-js-split-type-demo-navigation-ptc573

The Home page displays a list of links when you navigate to subpage, the <h1> element is split into lines, words, chars.
text splits correctly when navigating between pages

https://github.com/lukePeavey/SplitType/assets/8286271/8228e2c2-5af7-4812-a4e5-b76b37f3c57a

[lukePeavey]

@suhaylmv I added a static method SplitType.clearData() (v0.3.4)

This method needs to be called in the cleanup function of the useEffect hook:

  useEffect(() => {
    SplitType.create("h1")

    return function cleanup() {
      SplitType.clearData()
    }
  }, [work]);

Let me know if that works for you

[gempong]

Hi @lukePeavey, at first glance, it looks like this will work. I'll wait for the latest release. 🎉

[gempong]

Working properly!! 🎉🎉🎉

[lukePeavey]

Awesome!