Target a specific character from a string.

[Lrd0sh]

Hello, I'd like to know if there's a way in Gsap or splitText  to target a specific character from a word so that I can apply some effects on it, say I wan to tilt only the letter "L" from the word "help". I've looked into it and the closest I could find to a solution is based on jQuery, and I'd like to keep it Gsap all the way if possible. 

[tailbreezy]

Hello there,

 

I am not sure there is a way to specify custom regEx, which would have been fantastic.

 

In the meantime you can just wrap it in <span></span>

 

 

[akapowl]

 

Hey @Lrd0sh

 

If what you want is as simple as only just adressing one character and it doesn't have to follow any specific logic, it is pretty uncomplicated.

 

Since whatever you split your text by (which in your case with the word help probably is chars) will return an array of all the wrapping divs that are being created, you can address the element you want by using its index

 

See the Pen 4418c18ec371ac020134eaf4286967d3 by akapowl (@akapowl) on CodePen

 

 

If you'd want it to specifically be the letter "l" in every case though, I think you'd have to incorporate some logic for that.

Something like this could work

 

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

 

 

 

[Lrd0sh]

@tailbreezy That was my approche too, I made it work with a bunch of <spans>, but my understanding is that it's not good for SEO.

@akapowl That is exactly what I'm looking for, I'm a total noob so I thank you for clearing things out!

[ZachSaucier]

1 hour ago, Lrd0sh said:

I made it work with a bunch of <spans>, but my understanding is that it's not good for SEO

It's probably not a big deal for SEO but algorithms for that differ and change all the time so I can't say for sure. If you do it with JS once the page loads it should be perfectly fine though.

[Lrd0sh]

I really appreciate the quick feedback here, another good reason to love GSAP even more!