Open adamjw3 opened 7 months ago
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
<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?
Got the following code in react
This outputs code like this for example if we are using lines
What i want to do is wrap the
is this possible?