Is there a way to keep letterspacing after creating splitText?

[KaivWezel 0 Likes (Newbie)]

Hi, 

Im trying to create a nice animation with splittext.

Only thing is when creating the new SplitText, all the letters are set in a <div> which results in a different letter spacing.

 

I put in a reference of a non-split version of the text.

 

Is there a way to keep the default/old spacing while still splitting the text?

 

Thanks in advance!

See the Pen abKzrrd by kaivwezel (@kaivwezel) on CodePen

[GreenSock 18,576 Likes (Superhero)]

Well, you can set tag: "span" but the problem is that most browsers won't render transforms on inline elements, so you can't animate stuff like x, y, rotation, etc. It has nothing to do with GSAP - it's a browser/spec thing. Look at Dev Tools and you'll see GSAP applying the styles properly, but you just won't see them getting applied visually because the browser ignores them. So you need to have stuff set to display: inline-block to work like that, but of course that won't allow the kerning that inline <span> elements can do. So you kinda need to pick your poison. 

[GreenSock 18,576 Likes (Superhero)]

If you really need the spacing, another option is to make your text into SVG paths. Of course users can't highlight the text anymore like that and it's not as search-friendly. Another option is to manually apply the kerning with transforms or "left" or "margin" offsets. 

[akapowl 5,215 Likes (Superhero)]

5 hours ago, GreenSock said:

If you really need the spacing, another option is to make your text into SVG paths. Of course users can't highlight the text anymore like that and it's not as search-friendly. Another option is to manually apply the kerning with transforms or "left" or "margin" offsets. 

 

Or you could use actual SVG Text instead - that way the text would remain highlight-able for users and I think it also is being crawled by search-engines.

 

It allows you to set a comma delimited list of values as the y-attribute - so if you set as many values as you have characters, each of the values will correspond with a character of the element. (If you only set two values in this case e.g. '110, 110' the first value will be assigned to the first character and the second value to all the other characters)

 

  <text id="text" x="65" class="Rrrrr" y="110,110,110,110,110,110,110,110,110,110">Grumpy!</text>

 

Then you could e.g. do something like in the pen below to animate the individual values and set them to the text while they are being animated.

 

But this seems a bit wasteful to me. There might be some better way to handle the SVG attribute's data that I'm not aware of / didn't come to my mind, and thus this might very well be over-engineered. Given the simplicity of a regular Split-Tex workflow it sure feels like it. Maybe this can serve as inspiration at the very least though.

 

See the Pen JjZdGrm by akapowl (@akapowl) on CodePen