Destroy split

[PubliAlex]

Hello,

I'm using split and it works nicely.

However, I need to destroy it depending on an event (so remove all added html, css...) like if I didn't apply split at all to the element.

Is there any way to do that ?

Best regards,

[iamrobert]

Hello,

There isn't a method, but I have done it here:

https://www.iamrobert.com/

On the top banner when you hover over it - the text spans will remove after it has finished animating.

We used a custom function:

    function unsplitting(innerHTML) {
      return innerHTML
        .replace(/<span class="whitespace">(\s)<\/span>/g, '$1')
        .replace(/<span class="char" data-char="\S+" style="--char-index:\s?\d+;">(\S+)<\/span>/g, '$1')
        .replace(/ aria-hidden="true"/g, '')
        .replace(/<span class="word" data-word="\S+" style="--word-index:\s?\d+;( --line-index:\s?\d+;)?">(\S+)<\/span>/g, '$2');
    }

Here's a demo where its working:
https://codepen.io/iamrobert/pen/ZEOxRPd

The Splitting character spans are green and will go to white when they are removed.

We adjusted our splitting output - so the function won't remove 100% of the html - but it should give you a start.

[Sidstumple]

I used this because I had trouble using splitting in combination with Highway JS, might be useful for you as well:

const splitted = document.querySelectorAll('[data-splitting]')
if (splitted) {
  splitted.forEach(split => {
    split.innerHTML = split.innerText
  })
}

[GavinRF]

I've tried your method plus a bunch of different hacks to "destroy" Splitting. The issue is it never truly gets destroyed so it can't be recalled. I am trying to give user input a splitting style so the --word and --char count changes. Any ideas how I might get Splitting to run a second time?

https://codepen.io/GavFior/pen/GRGLYOv?editors=1010

[Eldzej]

In case someone stumbles across this like I did, I figured it out.
You need to set the "banana" emoji property to null, then you can call Splitting again

So something like this

split['🍌'] = null