Split Text coverts style tags

[wpsoul]

I found weird behavior in Split Text. If content has style tags

 

<div id="text">
  Some text
  <style>.example{color:red}</style>
</div>

it also divided on chunks

 

<div style='position:relative;display:inline-block;' class='gsap-g-word'><div style='position:relative;display:inline-block;' class='gsap-g-char'>.</div><div style='position:relative;display:inline-block;' class='gsap-g-char'>e</div><div style='position:relative;display:inline-block;' class='gsap-g-char'>x</div>...

How to prevent it from touching style tags? 

[GreenSock]

I've never seen someone put <style> tags nested inside of a <div> like that! Hm. Well, here's a method that'll solve it for you - it just temporarily removes the <style> tags and puts them back after the split: 

function styleSafeSplit(target, vars) {
  let targets = gsap.utils.toArray(target),
      styles = targets.map((target, i) => { // remove all the <style> elements
        let s = gsap.utils.toArray(target.querySelectorAll("style"));
        s.forEach(el => el.parentNode.removeChild(el));
        return s;
      }),
      split = SplitText.create(target, vars);
  styles.forEach((s, i) => s.forEach(style => targets[i].appendChild(style))); // insert the <style> elements again
  return split;
}

Use it the same way you would use SplitText.create(...)

styleSafeSplit("#text", {type:"chars,words"});

 

See the Pen VwNeqNB?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[wpsoul]

@GreenSock

 

style tags are only in backend, because we need to add some conditional styles. 

 

Code is working for first animation but failed when I do update. I replaced appendChild to .insertAdjacentElement('afterend', style))); and I think it's working fine

[GreenSock]

41 minutes ago, wpsoul said:

Code is working for first animation but failed when I do update.

I read that a few times but I still don't understand what you mean. Can you provide a minimal demo that illustrates the problem? 

 

41 minutes ago, wpsoul said:

I replaced appendChild to .insertAdjacentElement('afterend', style))); and I think it's working fine

Hm, that also sounds odd to me. Why would appendChild() fail? Again, a demo that illustrates the problem would be super duper amazingly helpful. 🙂

[wpsoul]

3 hours ago, GreenSock said:

I read that a few times but I still don't understand what you mean. Can you provide a minimal demo that illustrates the problem? 

 

Hm, that also sounds odd to me. Why would appendChild() fail? Again, a demo that illustrates the problem would be super duper amazingly helpful. 🙂

I have backend integrated in system so I can't make demo. Users can change data of animation, so, when it's loaded - it's working but when they change data, for some reason, style tags simply removed and don't add again. But using afterend place style tags outside block and it's working

 

It will be good to have parameter in Splittext to exclude some inner tags. <style> is not only the one which we may want to exclude from text animations. For example, I can have block with text and also table that  is generated on fly. I want to add text animation to everything in block but except table