Not splitting lines correctly

[hantastic]

Hi, I'm trying to split my content into lines but it appears to be splitting my paragraph instead. Any advice greatly appreciated please.

I'm using version 0.3.3 and Next.js version 13.2.4

Here's the code I'm using to split the text:

useEffect(() => {
    if (textRef.current) {
      gsap.registerPlugin(ScrollTrigger)
      const newText = new SplitType(textRef.current, { types: 'lines, words' })

      newText.lines.forEach((target) => {
        gsap.to(target, {
          backgroundPositionX: 0,
          ease: 'none',
          scrollTrigger: {
            trigger: target,
            markers: true,
            scrub: 0.5,
            start: 'top bottom',
            end: 'bottom center',
          },
        })
      })
    }
  }, [textRef])

[lukePeavey]

Can you create a live example on code sandbox?

I can't really tell what's happening without seeing the complete code.

[lukePeavey]

If you can't create a live demo, include the full code of that react component, including the html element that the ref is attached to.

It would also help to see the generated html in the web inspector after the split text function runs.

[khalilonline99]

useEffect(() => { if (textRef.current) { gsap.registerPlugin(ScrollTrigger) const newText = new SplitType(textRef.current, { types: 'lines, words' });

    gsap.to(newText.lines, {
      backgroundPositionX: 0,
      ease: 'none',
      scrollTrigger: {
        trigger: newText,
        markers: true,
        scrub: 0.5,
        start: 'top bottom',
        end: 'bottom center',
      },
  })
}

}, [textRef])