Jump to content


Auto word gradients - splitText

Recommended Posts

Hi everyone,


I'm here again with something that can maybe be done just in js but as I use gsap for my banner animation I thought it could also help me with some "design" problem.


I have very strict guidelines to follow : for every sentence in my banner,  every 2 words the color must change (yellow > orange > red > orange > yellow > orange...). So I started by just manually put some spans with styles (second text block in my pen) but that makes the code kind of difficult to read and also it messes up the breaklines.


As I already use splittext to make it appear line by line I was thinking that maybe i could set a color by breaking the sentences by words, but i'm kind of stuck there in the logic, has anyone an idea ?


thank you 

See the Pen jOYdRXr by fripi (@fripi) on CodePen

Link to comment
Share on other sites

thank you @Cassie that's a discovery for me :D

now i can just update that array to create the needed gradient woooowww

Link to comment
Share on other sites

@Cassie is there a way to start from array[0] for each sentence, or must I create a word array for each like that


let words1 = gsap.utils.toArray('#txt1 .w')
let words2 = gsap.utils.toArray('#txt2 .w')
let words3 = gsap.utils.toArray('#txt3 .w')
let words4 = gsap.utils.toArray('#txt4 .w')


  • Like 1
Link to comment
Share on other sites

There's many ways to approach this. You could do it that way yes.

Link to comment
Share on other sites

Thanks again, I modified my pen, it works great, I will try later to shorten that code if I understand how :D 

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.