From 28b380dce7706e7bd0225a52dc8b65a7ad0eab6c Mon Sep 17 00:00:00 2001
From: Leroy Korterink <leroy@mediamonks.com>
Date: Fri, 6 Jan 2023 16:10:33 +0100
Subject: [PATCH] Create new SplitText instance on rerender

---
 .../src/SplitTextWrapper/SplitTextWrapper.tsx | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/react-animation/src/SplitTextWrapper/SplitTextWrapper.tsx b/packages/react-animation/src/SplitTextWrapper/SplitTextWrapper.tsx
index aba4432..59d1d8e 100644
--- a/packages/react-animation/src/SplitTextWrapper/SplitTextWrapper.tsx
+++ b/packages/react-animation/src/SplitTextWrapper/SplitTextWrapper.tsx
@@ -1,8 +1,11 @@
 import { ensuredForwardRef } from '@mediamonks/react-hooks';
+import gsap from 'gsap';
 import SplitText from 'gsap/SplitText';
-import { useCallback, type ReactElement } from 'react';
+import { type ReactElement } from 'react';
 import { renderToString } from 'react-dom/server';
 
+gsap.registerPlugin(SplitText);
+
 export type SplitTextWrapperProps = {
   children: ReactElement;
   variables?: SplitText.Vars;
@@ -10,19 +13,21 @@ export type SplitTextWrapperProps = {
 
 export const SplitTextWrapper = ensuredForwardRef<SplitText | null, SplitTextWrapperProps>(
   ({ children, variables = {} }, ref): ReactElement => {
-    const onRef = useCallback(
-      async (element: HTMLDivElement) => {
-        if (ref.current && 'isSplit' in ref.current && ref.current.isSplit) {
-          return;
-        }
+    /**
+     * Not using useCallback on purpose so that a new SplitText instance is
+     * created whenever this component rerenders the children
+     */
+    const onRef = async (element: HTMLDivElement): Promise<void> => {
+      if (ref.current && 'isSplit' in ref.current && ref.current.isSplit) {
+        return;
+      }
 
-        ref.current = new SplitText(element, variables);
-      },
-      [ref, variables],
-    );
+      ref.current = new SplitText(element, variables);
+    };
 
     return (
       <div
+        // eslint-disable-next-line react/jsx-no-bind
         ref={onRef}
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{