lukePeavey / SplitType

Javascript utility that splits text into lines, words, characters for animation
https://lukepeavey.github.io/SplitType/
572 stars 40 forks source link

Error when splitting text containing line breaks #5

Closed lukePeavey closed 3 years ago

lukePeavey commented 3 years ago

Description

SplitType fails with an error when the target element contains <br> tags. This only occurs when splitting text into both lines and words.

Steps to reproduce

HTML

<div id="target">foo <br> bar </div>

Javascript

const text = new SplitType('#target', { types: 'lines, words' })

Live example

Expected result

It should respect <br> tags when splitting text into lines. The above code should produce the following html

<div id="target">
  <div class="line">
    <div class="word">foo</div>
  </div>
  <div class="line">
    <div class="word">bar</div>
  </div>
</div>

Actual result

Uncaught TypeError: Cannot read property 'concat' of null
    at split-type.js:567
    at Array.reduce (<anonymous>)
    at splitSingleElement (split-type.js:512)
    at split-type.js:875
    at Array.forEach (<anonymous>)
    at SplitType.split (split-type.js:872)
    at new SplitType (split-type.js:839)
    at pen.js:7
lukePeavey commented 3 years ago

Fixed