Splittext overriding first letter capitalisation

[GHazelwood]

Hey everyone, hope you're all well?

Long story short, I need my headings to have the first letter capitalised automatically. Splittext overrides this and my headings default to all lowercase.

 

e.g. 

.heading-style-h1::first-letter {
    text-transform: uppercase;
}

 

Is there a setting in split-text where I can make the first letter capitalised, or keep the styling?

 

First time posting and a GSAP newbie so please be gentle! Thanks so much.

[Rodrigo]

Hi @GHazelwood and welcome to the GSAP Forums!

 

Because of the way SplitText works it wraps every character around a <div> tag (this allows you to create cool transform animations among other things) so there are no letters inside the <h1> just divs. You can solve this using the charsClass config option in order to give each character a class and point the first child of that class inside of an <h1>, or create a more global selector to apply the text transform to the first div child of the h1, something like this:

h1::first-letter,
h1 .title-character:first-child,
h1 div:first-child {
  text-transform: uppercase;
}

Here is a simple demo:

See the Pen OPyzPxO by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!

[GHazelwood]

Hi @Rodrigo this is awesome, thanks so much. And really appreciate the speedy response! Apologies for the delay my side, I've been away. I'm only looking to make the first letter of the first word a caps - I've had a crack at implementing here: https://the-off-switch.webflow.io/services/irritable-bowel-syndrome but it's gone a little haywire and is capitalising the entire first word. Looking at documentation, would this be something to do with "class="char char1"?

 

[Rodrigo]

Then just use a single element for the whole sentence, the CSS and the JS is the same, here is a fork of the demo:

See the Pen jEbzBpY by GreenSock (@GreenSock) on CodePen.

 

Another alternative with the original demo I posted is to get fancy with the CSS selectors:

h1:first-child::first-letter,
h1:first-child .title-character:first-child,
h1:first-child div:first-child {
  text-transform: uppercase;
}

That's just a couple of options, there might be others but these use CSS.

 

Hopefully this helps

Happy Tweening!

[Cassie]

You can also add numbered classes and just target the specific class. That's probably the easiest route!

 

.char1 {
  text-transform: uppercase;
}

SplitText.create(e, {
   type: "chars",
   charsClass: "char++"
});

See the Pen VYvXQrp?editors=1111 by GreenSock (@GreenSock) on CodePen.

[GHazelwood]

Thanks @Rodrigo, it was still misbehaving due to me using a class called ".split" to split up the letters - my settings were slightly different to yours which was making it go nuts (I was following a Webflow tutorial which is probably why).

 

Huge thanks @Cassie, I've applied the numbered characters and that's done the trick, hugely appreciate everyone's help.

 

Looking forward to Webflow Conf too!