splitText line "Cannot Read property nodeType of null"

[Burning Stick Creative]

Im trying to split a paragraph into lines. Im splitting it twice, so the child div line can slide up  like this

 

I get the error "TypeError: Cannot read property 'nodeType' of null"

I tried with the type being "words" and that works fine, and also with "lines" just one time. That works too. It only seems to break when I try to split it twice.

Any ideas on what Im doing wrong? Its in a vue project if that matters.

 

Off topic too, but how would one have each class of ".split" have an independent scroll trigger? 

   const pChild = new SplitText(".split", {
        type:"lines",
        linesClass:"wordChild"
      });

  
      const pParent = new SplitText(".split", {
        type:"lines",
        linesClass:"wordParent"
      });

.wordChild {
  overflow: hidden;
}
.wordParent {
  display: inline-block;
}

 

[ZachSaucier]

Hey there. As the demo in the other thread shows, it seems to work fine for me.

 

Can you please create a minimal demo that exemplifies the issue using CodePen? You should be able to just fork the demo in the other thread and then edit it until you can recreate the error.

 

[Burning Stick Creative]

Hmm, Im wondering if its a gridsome rendering issue, versus the actual syntax. It doesnt seem to be doing it in codepen

[Burning Stick Creative]

@ZachSaucier

Cant seem to replicate it in codepen. Oddly enough 

       let pChild = new SplitText("p", {
        type:"lines",
        linesClass:"wordChild"
      });
      
let pParent = new SplitText("p", {
        type:"words lines",
        linesClass:"wordParent"
      });

Adding words to the second split prevents the error from happening. Not sure why? I guess it works as a temporary fix

[ZachSaucier]

1 minute ago, Burning Stick Creative said:

Adding words to the second split prevents the error from happening. Not sure why? I guess it works as a temporary fix

Does that work? I thought a comma was required: type: "words,lines".

[Burning Stick Creative]

1 minute ago, ZachSaucier said:

Does that work? I thought a comma was required: type: "words,lines".

It works either way, with or without the comma.

 

Using type: "lines" twice though is what seems to break it...

[ZachSaucier]

4 minutes ago, Burning Stick Creative said:

Using type: "lines" twice though is what seems to break it...

Very peculiar. If you're able to recreate the error in a CodeSandbox or whatever please do let us know  But I'm glad you at least found a work around.

[Burning Stick Creative]

Cool deal, also, how would one have an independent scroll trigger for each paragraph? To where each paragraph is independent of each other for triggering the animation in?

[ZachSaucier]

4 minutes ago, Burning Stick Creative said:

how would one have an independent scroll trigger for each paragraph? To where each paragraph is independent of each other for triggering the animation in?

Loop through each paragraph, creating a split, animation, and ScrollTrigger for each paragraph (making sure to scope the variables to that particular paragraph). I showed how to do that sort of thing in this post:

For more info check my article on animating efficiently.