SplitText and interpolations in Vue

[marcodellabate]

Hello again,

sorry for the second question in such a short time but I came up with a new problem using SplitText in Vue.

I have a text interpolation:

<h1>{{ text }}</h1>

 

I animated it through a method that includes splitText and GSAP similar to this one:

splitTitle() {
    let titleSplit = new SplitText("h1", {
            type: "chars",
          });

          let charsTimeline = new TimelineMax({
            onComplete: () => {
              titleSplit.revert();
            },
          });

          charsTimeline
            .from(titleSplit.chars, {
              duration: 1,
              scale: 0.4
            })
}

when the animation is finished (the text is introduced), when the user interacts in a certain way (say click) the text is supposed to change through the vue interpolation:

 

this.text = "newText"

 

but this doesn't happen and text stays the same and doesn't change anymore when the splitText is applied.
It looks like SplitText is replacing the parametric {{ text }} with a raw html text that removes the reactivity ties with Vue.

Is this expected behaviour? Is there any workaround?

[ZachSaucier]

Hey marcodellabate. I'm quite unfamiliar with how Vue assigns its references to text nodes when doing text interpolation. I would assume that it keeps a reference to the parent <h1> but they could try to reference the text node specifically somehow. That's probably a question better suited for the Vue forums. I can say that SplitText does change the innerHTML of the targeted element(s). You have to in order to do the sort of thing that SplitText does. You should be able to get the same problematic behavior if you just do something like this:

document.querySelector("h1").innerHTML = "newText";

 

Side note: I see that you're using the old syntax for your timelines. We highly recommend using the newer, sleeker syntax:

 

[marcodellabate]

You're right, it does act problematically if I use innerHTML.
But then SplitText does not work with dynamic/JS-generated text?

I'm gonna ask on the Vue forum too in the meanwhile.

[ZachSaucier]

15 hours ago, marcodellabate said:

SplitText does not work with dynamic/JS-generated text?

I wouldn't agree to that. I would say that Vue's dynamic/JS-generated text doesn't work when the innerHTML is switched out. You can change the innerHTML to whatever you'd like dynamically, however many times as you'd like, then tell SplitText to split it and it will work. So it's not an issue with SplitText.

[Dipscom]

If I may interject:

 

The issue here is to do with how efficient Vue is when updating the nodes. By default Vue will only re-render what has been changed. In this case, only the inner text is being changed. If you look at the state of your application with Vue dev tools, I bet you can see the string updating correctly.

 

No animation can be triggered because there is alreay a bunch of other things inside your element - all the divs that SplitText created in order to do its magic.

 

What is missing is for you for manually tell Vue to re-render the whole element you need and then, you can apply a new SplitText.

 

The easiest way to achieve that (and the recommended as far as I know) is to add a unique key to the element and change the key as you update the text to be displayed. See here a simple example:

 

See the Pen yLajpVE by dipscom (@dipscom) on CodePen

[marcodellabate]

@Dipscom you are the MVP! Many thanks