Can't keep <br> tags in inner html while using SplitText

[nicolaseielll]

Hello, I'm trying to animate a longer paragraph which requires some divisions between the lines but I cannot get the <br> tags to work how I want.

 

I created a codesandbox to demonstrate the problem:

https://codesandbox.io/s/weathered-glade-pb7shz?file=/pages/index.vue

 

I'm using v-html to inject the text.

 

Thanks in advance!

[Rodrigo]

Hi,

 

The problem is that when you create the second split to give each line a new parent the line that was created as a result of the two <br> tags is set to an empty element with no height since it has no text in it.

 

Using this HTML seems to work as you expect:

const innerHtml = "Lorem ipsum dolor sit amet<br>&nbsp;<br>Lorem ipsum dolor sit amet";

Also I consider a good practice when using SplitText in Vue, to wait for the next tick in order to be sure that the DOM has been correctly updated and the v-html directive has been applied correctly. Is just my opinion on the subject so take it with a grain of salt, but I prefer to do this:

mounted() {
  this.$nextTick(() => {
    var p = document.querySelector(".p");
    var splitP = this.getSplitText(p);
    gsap.set(splitP.lines, { opacity: 0, yPercent: 150, rotate: "5deg" });

    gsap.to(splitP.lines, {
      opacity: 1,
      yPercent: 0,
      rotate: 0,
      duaration: 1,
      ease: "Power3.easeInOut",
    });
  });
},

Here you can see a live example:

See the Pen gOzyZMj by GreenSock (@GreenSock) on CodePen

 

Let us know how it works and if you have any other question.

 

Happy Tweening!

[nicolaseielll]

I was too quick to celebrate. I cannot get it to work in that nuxt project in codesandbox. I also tried to set the innerHtml via javascript and not via using v-html but it did not have any effect.

 

If you try, are you able to get it working in the demo I provided? I have the exact same setup in local project.

[nicolaseielll]

Hello, I found a solution! I simply replaced the "&nbsp;" with "&zwnj;" and it started working!