Feature Request: preserve HTML tags in split text

[reksaandhika]

First thing first, i love this library, easy to use and understand, but my problem is, i have italic text on my div, after using split line it's just regular text without italic anymore. How do i solve this problem?

[lukePeavey]

First of all, I'm glad to hear you like the library! One thing that might be causing this...

SplitType does not (currently) support nested HTML elements inside the target element(s). The target elements (that you pass to the SplitType constructor) should directly contain the text content that you want to split. Any HTML inside the target elements will be stripped away when the text is split. This could result in lost styles.

[lukePeavey]

@reksaandhika Were you able to resolve this issue? If you are still having trouble let me know.

[reksaandhika]

@lukePeavey sorry just miss the notification, actually the problem not yet solved, because i want to put styling html in middle of paragraph, in the end im using another library (sorry for you to hear this), but if you have another solution i can switch to this library again because i still love the simplicity of this library, thanks.

[powerbuoy]

Support for HTML in the text would be awesome! We too are using em etc like this <h1>What can we do for <em>you?</em></h1> and it gets stripped.

[lukePeavey]

I agree this would be a really useful feature. It addition to styling specific parts of the text, it would also make it possible to include links and interactive elements within the split text.

Its definitely at the top of the list for the next major update. Unfortunately its not going to be a quick feature to implement. I started working on it a while ago, and it looks like it will require re-writing a lot of the logic in the split function. So at the moment I don't have the time to tackle it. But I hope to get to it in the near future. I will keep everyone posted if there are any updates on this.

Also, in the meantime, if anyone else is interested in working on this, please feel free to submit a PR.

[lukePeavey]

@powerbuoy @reksaandhika

Its not perfect, but here is a possible workaround until we can add this feature...

A splitType instance can have multiple target elements. So instead of targeting a single parent element, you could wrap each part of your text in an element, then split the child elements.

So instead of

<h1>This is some <em>very bold</em> content</h1>

You could do

<h1>
  <span>This is some</span>
  <em>very bold</em>
  <span>content</span>
</h1>

const split = new SplitType('h1 > *', { types: 'words, chars' })

Then you can animate split.words or split.chars just as you normally would.

https://user-images.githubusercontent.com/8286271/109017305-0b76e000-7685-11eb-8ba4-8dcd19081253.mp4

Codepen example

Caveats

This will not work if you are splitting text into lines

[reksaandhika]

@lukePeavey thanks for temporary solution, keep it up man. This is alternative splittext from gsap for me, but it's free

[trompx]

Thanks for the temporary solution Luke. I haven't checked their codebase and don't know how difficult it would be to implement this feature but being able to do the same as here would be awesome.

[vishalagheraD]

@lukePeavey i need like this. I hope to get to it in the near future. please please please <h1>This is some <span>very bold</span> content</h1>

[haroldao]

any updates here ?

[lukePeavey]

Sorry everyone...☹️ No updates at this time.

This feature cannot be implemented without re-writing a lot of the existing code. This would require a substantial time commitment. Unfortunately it's not something I can take on right now.

If I have a block of free time in the future, I will definitely try to tackle this.

Any contributions on this feature would be appreciated. If someone wants to contribute a PR i would definitely be willing to work on it with you.

In the meantime, if you need this feature, i would recommend purchasing GSAP SplitText.

I will keep you posted if anything changes

[haroldao]

that's what I did. But thanks for your time on this project man 🙌🏽 @lukePeavey

[lukePeavey]

I'm going to take another look at this and see what I can do. I'll keep you guys posted

[lukePeavey]

Working on a PR now. Will hopefully have an update in the coming weeks.

[lukePeavey]

UPDATE

This feature is ready to go!

Will be releasing a new version shortly

[lukePeavey]

🎉 🚀 Released in v0.3.0. Sorry for the very long wait on this one.

[lukePeavey]

Closing this. If you run into issues with this feature, feel free to open a new issue.

[lukePeavey]

See Storybook Examples

CodePen Demo