wrap elements in custom element to animate

[adamjw3]

Got the following code in react

`
 import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import SplitType from "split-type";

interface SplitProps {
  children: React.ReactNode;
  splitMode: String;
  delay: number;
}

const Split = ({ children, splitMode, delay = 0 }: SplitProps) => {
  const trigger = useRef<HTMLDivElement>(null);
  const target = useRef<HTMLDivElement>(null);

  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    const init = () => {
      split();
    };

    const animate = (text) => {
      gsap.from(text, {
        delay: delay,
        y: "105%",
        duration: 0.5,
        stagger: 0.05,
        ease: "power2.in",
        force3D: true,
        scrollTrigger: {
          trigger: trigger.current,
          scrub: false,
        },
      });
    };

    const splitChars = () => {
      const text = new SplitType(target.current!, { splitClass: "split-text", types: "chars" });
      animate(text.chars);
    };

    const splitLines = () => {
      const text = new SplitType(target.current!, { splitClass: "split-text", types: "lines" });
      animate(text.lines);
    };

    const splitWords = () => {
      const text = new SplitType(target.current!, { splitClass: "split-text", types: "words" });
      animate(text.words);
    };

    const split = () => {
      if (splitMode === "chars") {
        splitChars();
      } else if (splitMode === "lines") {
        splitLines();
      } else if (splitMode === "words") {
        splitWords();
      }
    };

    init();
  }, []); // Empty dependency array ensures that the effect runs once after the initial render

  return (
    <span ref={trigger} className="inline-block">
      <span ref={target} className="inline-block overflow-hidden overflow-clip">
        {children}
      </span>
    </span>
  );
};

export default Split;
`

This outputs code like this for example if we are using lines

<span class="inline-block overflow-hidden overflow-clip">
       <div class="split-text line">Lorem ipsum dolor sit amet, consectetur..</div>
        <div class="split-text line">Lorem ipsum dolor sit amet, consectetur..</div>
</span>

What i want to do is wrap the

div in another div that will act as the overflow-hidden, so the output would look like

<span class="inline-block overflow-hidden overflow-clip">
       <div class="split-text-wrapper">
                <div class="split-text line">Lorem ipsum dolor sit amet, consectetur..</div>
        </div>
        <div class="split-text-wrapper">
                <div class="split-text line">Lorem ipsum dolor sit amet, consectetur..</div>
        </div>
</span>

is this possible?