Activity

1. iamrobert commented on Oct 30, 2020

   

   iamrobert

   on Oct 30, 2020

   More actions

   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.
2. cydstumpel commented on Feb 7, 2021

   

   cydstumpel

   on Feb 7, 2021

   More actions

   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
     })
   }
3. GavinRF commented on Dec 11, 2022

   

   GavinRF

   on Dec 11, 2022

   More actions

   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
4. Eldzej commented on Jan 8, 2024

   

   Eldzej

   on Jan 8, 2024

   More actions

   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

   👍React with 👍1Reacted by Armin

   👀React with 👀1Reacted by Roman Hrynevych