Using SplitText on content with <br>

[bgano]

I'm using the SplitText plugin on content coming from a CMS. The content often includes hard line breaks (<br>) that must be maintained, but the SplitText plugin is just moving them to the end of the paragraph.

 

Before:

<p>Manual<br>Line<br>Break</p>

 

Expected:

<p>
<div>Manual</div>
<br>
<div>Line</div>
<br>
<div>Break</div>
</p>

 

Actual:

<p>
<div>Manual</div>
<div>Line</div>
<div>Break</div>
<br>
<br>
</p>

 

See the Pen GbXzvQ by bgano (@bgano) on CodePen

[PointC]

Hi @bgano 

 

Welcome to the forum and thanks for joining Club GreenSock.

 

Please try switching your properties object to lines instead of line.

var properties = {
  type: "lines"
};

 

More info:

https://greensock.com/docs/Utilities/SplitText

 

Happy tweening and welcome aboard.

 

[bgano]

@PointC === hero

 

It's interesting that an invalid value causes different behavior than a missing value.

 

Specifically, omitting the type property or setting it to null or an empty string defaults to "chars,words,lines". But setting it to any invalid string (e.g., "line" "bob", "iamthewalrus", etc.) results in the weird behavior from my pen above.

 

Thanks for the quick response!