SplitText is not splitting the dom into words

[Jim Tim]

 why I'm not getting word-by-word animation? 
in this case, I want to split the word as present as in the dom so I used  
but the splitText is not splitting the dom into words instead it splits into lines.
where am I going wrong kindly help me.

See the Pen BaqgPaV by dajeme7838- (@dajeme7838-) on CodePen

[mvaneijgen]

Hi @Jim Tim I don't know why your text was build up with &nbsp; and there were a lot of inline styles set on the blockquote block, also your blockquote text was wrapped in a <p> tag.

 

If I just copy your text to a new clean blockquote everything works as expected. Hope it helps and happy tweening! 

 

See the Pen yLRdxMM by mvaneijgen (@mvaneijgen) on CodePen

[Jim Tim]

hi @mvaneijgen I expect the output to look like this.
there should be multiple space in my scenario that's why I use &nbsp;

[Rodrigo]

Hi,

 

I don't think there is need for all that &nbsp; there, maybe just a different HTML could be enough:

<blockquote
style="font-size: 18.21px; width: 305.735px; height: 55.8393px; font-style: normal; font-family: Roboto-Regular, gfs; text-decoration: none; transform: translate(144.927px, 0.663px); max-width: calc(100% - 22.7625px); text-align: center; text-transform: none; background: rgb(0, 0, 0); color: rgb(255, 255, 255); letter-spacing: 0em; line-height: 1.2; word-break: break-word; padding: 6px;">
  <p class="sc-bdxVC lcokJp">
    tom hello hello there how are you<br>rom<span class="right">hello</span>
  </p>
</blockquote>
<br>

With this CSS:

.right {
  margin-left: 25%;
}

Here is a fork of your codepen using the latest version of GSAP and SplitText as well:

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

 

Hopefully this helps.

Happy Tweening!