Jump to content
Search Community

SplitText - Identifying certain characters

pmascis test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi all,

 

I want to do some styling to some headings.

Specificially change the last character (which will be a character like . ? ! etc) to a different colour.

I have used splitText to break apart every character and have used css to target the last child.

 

However, since these are headings and they will have some weight with SEO, I am concerned with stripping every letter apart and into divs etc.

I was wondering if there is some way to tell splitText to only disassemble the last character, or perhaps even target certain characters so I can achieve the style that I want without breaking everything up.

 

Thanks in advance!

 

Paul

Link to comment
Share on other sites

SplitText doesn't have anything to grab the last character or last word, but the wordDelimiter will allow you to specify where a word should be split. 

 

So if you want to throw a special character into your h1 you could do something like

 

<h1>Latest News*!</h1>
<h1>Questions*?</h1>

 

and then

 

var tl = new TimelineLite, 
    mySplitText = new SplitText("h1", {type:"words", wordDelimiter:"*"});

 

that will result with 2 divs inside each h1 which may be an SEO NO NO. I also doubt you want to inject characters into your h1, but that's the easiest way I could think of by leveraging what SplitText can do and not writing any custom js.

See the Pen dgyKXG by GreenSock (@GreenSock) on CodePen

 

It's probably going to be better to write your own function that searches each heading for those characters and wraps them in spans.

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...