Jump to content
Search Community

Targeting a class within the SplitText feature

elandril 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

Hello elandril.


In your CSS you are targeting span.special, but that would not find any span with red after SplitTextPlugin runs. Since SplitTextPlugin uses div tags not spans. So the class special gets added to every nested div SplitTextPlugin creates for you, since that is what charClass does.


But if you wanted to just add a red color on the 8th word, which is the word @person. You could just use regular CSS to target the 8th word.


See the Pen epxeGO by jonathan (@jonathan) on CodePen


/* targets only the 8th word after SplitTextPlugin runs */
h1 > div:nth-child(0n+8){

This way you are just targeting the word you want... since charClass, wordClass and lineClass will add the same class on each div. And all you want is one class added to one div.


If you look at the HTML generated by SplitTextPlugin for your codepen example above, you will see that it is adding the class special to every div tags children using the charClass.


Look at the SplitTextPlugin Docs:

  • charsClass : String - a css class to apply to each character's <div>, making it easy to select. If you add "++" to the end of the class name, SplitText will append an incremented number to each character's <div>, starting at 1. For example, if charsClass is "char++", the div's class for the first character would be "char1", the next would be "char2", then "char3", etc.[default: undefined]

Since you want to just add the color red to only one word. So in this case lineClass, wordClass, or charClass will not help you since they all add your class to every div depending on what you choose (lineClass, wordClass, or charClass) Please see the SplitTextPlugin Docs.


So i would just use CSS to target the word you want red. And only use lineChar, wordChar, or lineChar for general class names you want added to all your split text lines, words or characters.


SplitTextPlugin Docs: http://greensock.com/docs/#/HTML5/Utilities/SplitText/


Hope this helps :)

  • Like 5
Link to comment
Share on other sites

Hi Jonathan,

Thanks for your help. But, I probably should have clarified this more. The text I need targeted could be anywhere in the sentence and will basically be generated randomly. So, just targeting the 8th word or something like that wouldn't work for me. Is there a way to do it so regardless of where the targeted-word is, it will be highlighted red?

Link to comment
Share on other sites

The only thing i can think of without seeing additional code would be to use JS to add a class to the random word. But like i advised above lineClass, wordClass, and charClass just add classes to all the div tags depending on which one you use. So what you want would require some custom JS to add or remove a class depending on how or what your project is going to do.


But you could also use that same type of CSS nth-child selector with either the querySelector() method or with a jQuery wrapper selector and just concatenate the random number you need in to the selector, just inside some loop.

  • Like 1
Link to comment
Share on other sites

I don't have much to add to Jonathan's excellent advice. 


SplitText only grabs the raw text out of the node that you splitting, it does not honor nested tags like <span>, <em> or <strong>.


You could do 3 splits textBeforeSpecial, specialText, textAfterSpecial which would require wrapping each in its own span. 


FWIW you could write some JS to look for a span tag inside an element and do all that wrapping for you, but it's beyond what we can do at the moment.
Using JS you could probably also find which word is wrapped in a <span>, record its position, and then use Jonathan's method above using an nth-child selector to supply styles to a particular word after it is split.


In short what you want to do is not directly supported in SplitText, it's possible using JS, but not trivial. 

  • Like 3
Link to comment
Share on other sites

  • 1 year later...

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...