Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Tom Roberts

Targeting and animating a specific word with splitText

Recommended Posts

Hi Greensockers!

I am experimenting with splitText and cannot figure out how to target a specific word or phrase within some text.

The codepen has one word wrapped in a span but I'm not sure how to target it in order to animate it.

 

Thanks in advance for your help

See the Pen YzWzxBz by neilb1969 (@neilb1969) on CodePen

Link to post
Share on other sites

If you're talking about the individual characters in that span, you can do something like this.

 

tl.to(".highlight div", {...})

Does that help? Happy tweening. :)

 

  • Like 4
Link to post
Share on other sites

Hey @Tom Roberts,

 

You can also use charsClass, wordsClass or linesClass:

 

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

 

Happy splitting ...

Mikel

  • Like 2
Link to post
Share on other sites
21 hours ago, mikel said:

Hey @Tom Roberts,

 

You can also use charsClass, wordsClass or linesClass:

 

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

 

Happy splitting ...

Mikel

HI Mikel,

Thanks for the reply. Can you give me an example of what you mean via the codepen I posted above?

I am fairly new to gsap and javascript and I would be guessing at the syntax so all help is greatfully received.

 

Link to post
Share on other sites

Hey TOM,

 

Of course:

 

See the Pen Bazyaee?editors=1010 by mikeK (@mikeK) on CodePen

 



mySplitText = new SplitText("#quote", {type:"words,chars", wordsClass:"word++"}), 
  ...
.set('.word2', {color:'green'})

 

Happy applying ...

Mikel

  • Like 3
Link to post
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.

×