search

lukePeavey / SplitType

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

split lines not working if target element contains comment nodes #36

Closed danielkorte closed 2 years ago

danielkorte commented 2 years ago

The option types: 'lines' works in v0.2.5, but it is broken in 0.3.0 as far as I can tell. The wrapper HTML is created, but the actual text is not split between the wrappers.

lukePeavey commented 2 years ago

Can you reproduce this issue on codepen so I can take a look at your example?

The split lines feature is working in all of the examples in the storybook.

I've also created some animation examples on codepen using v0.3 and split lines was working.

lukePeavey commented 2 years ago

Storybook example: split lines only https://lukepeavey.github.io/SplitType/?path=/story/tests-multi-line-text--split-lines

CodePen: split lines only https://codepen.io/lukePeavey/pen/jOZgbqx

danielkorte commented 2 years ago

It seems to be a problem with comments within the text: https://codepen.io/danielkorte/pen/LYQwpWV

danielkorte commented 2 years ago

In v0.2.5 it works but v0.3.0 does not work with comments.

lukePeavey commented 2 years ago

Oh interesting, I never tested that. I'll take a look

lukePeavey commented 2 years ago

Yes I see what you mean. It also adds an extra space at the beginning of the first line when text is split.

I'll see if I can fix this.

lukePeavey commented 2 years ago

@danielkorte PR #38 should fix this issue. I tested your CodePen using the new build, everything seems to be working now.

Your example also reminded me about another issue that needs some work : flexbox support.

Currently, when the target elements are inside a flex container, some specific styles are required to prevent the text from shifting around when it gets split.

When target element is inside a flex row: it needs to have a defined width or flex: 1

When target element is inside a flex column, it needs to have a defined width.

In your CodePen, adding width: 100% to the target element prevents the text from shifting to the right when split.

We should open a separate issue for this.

Updated CodePen https://codepen.io/lukePeavey/pen/jOZgVXG

lukePeavey commented 2 years ago

Patched in version 0.3.1